Javascript 悬停时更改div颜色

尝试更改每个div的背景色，并使其在鼠标悬停在div上时保持不变。无法使其更改颜色。我做错了什么

---

提前谢谢你

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

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

演示：

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

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

演示：

---

更新
正如下面注释中所建议的，元素的ID在文档中必须是唯一的，因此使用类而不是ID来对类似的元素进行分组

---

演示：

在DOM中有具有相同id的元素。您可以改为使用

类

和css

：hover

。无需在此处使用jquery：

$（文档）.ready（函数（）{
var=16；
var高度=40；
var宽度=40；
$（'.container'）。高度（高度*1）；
$（'.container'）.width（width*s）；
对于（变量行=0；行<宽度；行++）{
$（“”）.appendTo（“.container”）
for（var cols=0；cols
.container{
背景颜色：灰色；
保证金：0自动；
文本对齐：居中；
字号：0；
边缘底部：30px；
}
格里德广场酒店{
宽度：16px；
高度：16px；
背景色：黑色；
显示：内联块；
垂直对齐：顶部；
}
/*使用css更改悬停时的背景*/
.container.gridSquare:悬停{
背景：白色；
}
对您的js进行了一些更改，如下所示：


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

});

$（文档）.ready（函数（）{
var=16；
var高度=40；
var宽度=40；
$（'.container'）。高度（高度*1）；
$（'.container'）.width（width*s）；
对于（变量行=0；行<宽度；行++）{
$（“”）.appendTo（“.container”）
for（var cols=0；cols


DOM中的
id
s应唯一。因此，将其更改为
class
改用
鼠标盖

您可以使用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");
        });

    });

$（文档）.ready（函数（）{
var=16；
var高度=40；
var宽度=40；
$（'.container'）。高度（高度*1）；
$（'.container'）.width（width*s）；
对于（变量行=0；行<宽度；行++）{
$（“”）.appendTo（“.container”）
for（var cols=0；cols
正如我在你的小提琴上看到的那样

您已创建具有相同“id”属性的div：

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

如果您将gridSquare用作“类”：

你不能用css
：hover
？我正在尝试使用jQuery来完成这个项目，所以这是我的首选方法。jQuery不应该用于更改背景等简单任务。特别是如果你可以用css来实现这一点，那么页面上的负担就更少了。当你可以在css中使用JQuery一行时，使用JQuery就太过分了……你的Id“gridSquare”正在重复。。你可以在Fiddle上看到这一点谢谢，但我希望鼠标离开网格后网格保持白色。我使用了你的jQuery方法，但我刚刚删除了mouseleved函数。再次感谢你的帮助！为什么不提及使用相同id的多个元素的不良做法？@sickcodeworm或
$('<div id="gridSquare"></div>').appendTo('.container');

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

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

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

});

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

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

});