Question

我正在尝试使用CSS和Javascript来制作一个正方形网格，这些正方形会在您将它们蒙上过后改变颜色。

makeGrid(10);

$(".grid").hover(
    function() {
        $(this).css('color','lightgreen');
    }, 
    function() {
        $(this).css('color', 'white');
    }
);

//Create a grid n x n
function makeGrid(n){
    for(i = 0; i < n; i++){
        for(j = 0; j < n; j++){
            $('.pad').append('<div class="grid">Thing</div>');
            //$('.pad').append('<div class="grid"></div>');
        }
    }


   }

和css

.pad{
    background-color: black;
    width: 1000px;
    height: 1000px;
    float: center;
}

.activated {
    background-color: white;
}
.grid{
    float: left;
    width: 100px;
    height: 100px;
}

如果div包含某些内容（如第一种方式所示），我似乎能够让它工作，但如果div中没有任何内容（如注释掉的那样），则无法工作。我已经将div设置为在css中有一个大小，我看到它们仍然出现，因为背景颜色不同但是鼠标悬停甚至不再有效，即使我指定了实际的div。为什么这不起作用？我错过了什么吗？

Answer 1

很难确定你在问什么。我认为问题在于您正在修改color属性，这实际上是字体颜色，您希望background-color属性如此：

$(".grid").hover(
    function() {
        $(this).css('background-color','lightgreen');
    }, 
    function() {
        $(this).css('background-color', 'white');
    }
);

如果内部没有任何内容，为什么Javascript不会改变我的div的背景颜色？

1 个答案: