改变每个数组元素的颜色
改变每个数组元素的颜色
提问于 2015-12-27 04:39:51
我不熟悉HTML/CSS/JavaScript/Jquery/我有一个div标记数组，这些标记被表示为方框。我想改变颜色的盒子，当我悬停在他们之上，但我不知道如何访问每个div标签，并改变其属性。
HTML：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet3.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="script3.js"></script>
<body>
<div class="wrapper">
</div>
</body>
</head>
</html>CSS：
body
{
background:#000;
}
.square
{
display: table-cell;
vertical-align: middle;
text-align: center;
border:2px solid #73AD21;
height: 2.5rem;
width: 2.5rem;
background-color: white;
}Javascript/Jquery：
$(document).ready(function() {
for(i=0; i<16; i++) {
$('.wrapper').append('<div class="line">');
for(j=0; j<16; j++) {
$('.wrapper').append('<div class="square">'+j+'</div>');
}
$('.wrapper').append('</div>');
}
/*$('.wrapper').hover(function()) {
$(this).css("background","#F00");
}*/
});当我在Javascript/Jquery部分中添加注释行时，整个网页变成黑色。
回答 4
Stack Overflow用户
回答已采纳
发布于 2015-12-27 04:43:39
当我在JavaScript/jQuery部分中添加注释行时，整个网页将变成黑色。
这是因为有语法错误。当发生这种情况时，没有一个.square元素被追加，这正是您看到空白页的原因。
方法需要两个函数作为参数(悬停输入和悬停回调)。因此，您似乎需要以下内容：
$('.wrapper .square').hover(function() {
$(this).css("background", "#f00");
}, function() {
$(this).css("background", "#fff")
});但是，您可以使用伪类使用纯CSS来完成此操作。实际上，这并不需要jQuery。
.square:hover {
background-color: #f00;
}Stack Overflow用户
发布于 2015-12-27 04:45:23
这是因为这一行有语法错误。
$('.wrapper').hover(function()) {
$(this).css("background","#F00");
}在调用$(this).css函数之前，您正在关闭悬停函数，因此所选择的“此”是主体。它应该是：
$('.square').hover(function() {
$(this).css("background","#F00");
}, function() {
$(this).css("background","#FFF");
});Stack Overflow用户
发布于 2015-12-27 04:47:09
注释行的代码中有一些语法错误。
这是对的
$(document).ready(function() {
for(i=0; i<16; i++) {
$('.wrapper').append('<div class="line">');
for(j=0; j<16; j++) {
$('.wrapper').append('<div class="square">'+j+'</div>');
}
$('.wrapper').append('</div>');
}
$('.square').hover(function() {
$(this).css("background","#F00");
},function(){
$(this).css("background","#fff");
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/34477627
复制相关文章
相似问题
腾讯云开发者
