Question

尝试更改每个div的背景颜色，并在鼠标悬停在div上时使其保持这种状态。无法让它改变颜色。我究竟做错了什么？ Here's the fiddle.

$('.container').on('hover', '#gridSquare', function(){
        $(this).css('background-color', 'white');
    });

提前谢谢！

Answer 1

不需要使用jQuery，只需使用css选择器：hover

#gridSquare:hover {
    background-color: white;
}

演示：Fiddle

如果你想使用jQuery，你需要使用mouseenter和mouseleave

$('.container').on('mouseenter', '#gridSquare', function () {
    $(this).css('background-color', 'white');
}).on('mouseleave', '#gridSquare', function () {
    $(this).css('background-color', '');
});

演示：Fiddle

<强>更新
正如下面评论中所建议的，元素的ID在文档中必须是唯一的，因此使用class而不是id来对相似的元素进行分组。

演示：Fiddle

Answer 2

DOM中的元素具有相同的id。您可以使用class代替css :hover。这里不需要使用jquery：

$(document).ready(function() {
  var suareside = 16;
  var height = 40;
  var width = 40;

  $('.container').height(height * suareside);
  $('.container').width(width * suareside);

  for (var rows = 0; rows < width; rows++) {
    $('<div class="gridSquare"></div>').appendTo('.container')
    for (var cols = 0; cols < height; cols++) {
      $('<div class="gridSquare"></div>').appendTo('.container')
    }
  }
  //No need jquery
  /*$('.container').on('hover', '.gridSquare', function() {
    $(this).css('background-color', 'white');
  });*/

});

.container {
  background-color: grey;
  margin: 0 auto;
  text-align: center;
  font-size: 0;
  margin-bottom: 30px;
}
.gridSquare {
  width: 16px;
  height: 16px;
  background-color: black;
  display: inline-block;
  vertical-align: top;
}
/*change background on hover using css*/

.container .gridSquare:hover {
  background: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div class="container"></div>
</body>

Answer 3

对您的js进行了少量更改，如下所示：

<强> DEMO

$(document).ready(function(){
    var suareside = 16;
    var height = 40;
    var width = 40;

    $('.container').height(height*suareside);
    $('.container').width(width*suareside);

    for(var rows = 0; rows < width; rows++){
    $('<div class="gridSquare"></div>').appendTo('.container')
        for(var cols = 0; cols < height; cols++){
            $('<div class="gridSquare"></div>').appendTo('.container')
        }
    }

    $('.container').on('mouseover', '.gridSquare', function(){
        $(this).css('background-color', 'white');
    });

});

id应唯一。因此，将其更改为class
使用mouseover代替！

Answer 4

您可以使用hover（）。

  $(document).ready(function(){
        var suareside = 16;
        var height = 40;
        var width = 40;

        $('.container').height(height*suareside);
        $('.container').width(width*suareside);

        for(var rows = 0; rows < width; rows++){
        $('<div id="gridSquare"></div>').appendTo('.container')
            for(var cols = 0; cols < height; cols++){
                $('<div id="gridSquare"></div>').appendTo('.container')
            }
        }

        $('.container').hover(function(){
            $('#gridSquare').css("background-color","#FFFFFF");
        });

    });

Answer 5

正如我在你的小提琴中看到的那样，

您创建了具有相同＆＃34; id＆＃34;的div。属性：

$('<div id="gridSquare"></div>').appendTo('.container');

这将是更好的方法使用＆＃34; class＆＃34;而不是＆＃34; id＆＃34; ：

$('<div class="gridSquare"></div>').appendTo('.container');

并在鼠标悬停时更改div的颜色：

如果您使用gridSquare作为＆＃34; id＆＃34;：

$('.container').on('mouseover', '#gridSquare', function(){

            $(this).css('background-color', 'white');

});

如果您使用gridSquare作为＆＃34; class＆＃34;：

$('.container').on('mouseover', '.gridSquare', function(){

            $(this).css('background-color', 'white');

});

在悬停时更改div颜色

5 个答案: