Question

我是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部分添加注释行时，整个网页变黑。

Answer 1

当我在JavaScript / jQuery部分添加注释行时，整个网页变黑。

那是因为语法错误。发生这种情况时，没有附加任何.square个元素，这正是您看到空白页面的原因。

.hover() method需要两个函数作为参数（悬停和悬停回调）。因此，您似乎想要以下内容：

Example Here

$('.wrapper .square').hover(function() {
  $(this).css("background", "#f00");
}, function() {
  $(this).css("background", "#fff")
});

但是，您可以使用:hover pseudo-class使用纯CSS执行此操作。你实际上并不需要jQuery。

Example Here

.square:hover {
  background-color: #f00;
}

Answer 2

那是因为你在这一行上有语法错误

$('.wrapper').hover(function()) {
    $(this).css("background","#F00");
}

在调用$(this).css函数之前，您正在关闭悬停功能，因此＆＃34; this＆＃34;正在被选中的是身体。它应该是：

$('.square').hover(function() {
    $(this).css("background","#F00");
}, function() {
    $(this).css("background","#FFF");
});

Answer 3

您的代码中有一些语法错误。

这是正确的

$(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");

       });
   });

WORKING FIDDLE

Answer 4

希望你想要这个...

 $(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').on('hover','.square',function() {
      $(this).css("background","#F00");
     });
   
   $('.wrapper').on('mouseleave','.square',function() {
      $(this).css("background","#FFF");
     });
   });

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;
}

<!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>

更改每个数组元素的颜色

4 个答案: