Div CSS在悬停时不改变

div css not changing on hover

本文关键字：改变 悬停 CSS Div      更新时间：2023-09-26

我有一个div的网格，当我把鼠标悬停在它们上面时，我想改变它们。我试图使它的背景颜色改变为白色，并回到灰色时，鼠标不再悬停在他们。我已经找了一段时间了，但我似乎找不到一个能解决我所寻找的问题的答案。

var d = ("<div class='square'></div>");
var value = [];

function createGrid(numSquares) {
    var area = $('#g_area');
    var squareSize = Math.floor(area.innerWidth() /numSquares);
    var n =0;
    for (var i = 0, len = (numSquares*numSquares); i < len; i++) {
        area.append(d);
        for (var j = 0; j < numSquares; j++) {
            $(d).attr('id', n);
            n++;
            value[n] = 0;
        }
    }

    $('.square').height(squareSize);
    $('.square').width(squareSize);
};
function resetGrid() {
    $(".square").remove();
}
$(document).ready(function () {
    createGrid(32);
});
$('.square').hover(function() {
    $(this).css({backgroundColor: '#FFFFFF'}) ;
    $(this).css({backgroundColor: '#C8C8C8'}) ;
});

jsfiddle: https://jsfiddle.net/psyonix/1g9p59bx/16/

您的hover语法不正确，您需要传递两个函数:

$('.square').hover(function () {
    $(this).css({
        backgroundColor: '#FFFFFF'
    });}, function(){
    $(this).css({
        backgroundColor: '#C8C8C8'
    });
});
<<p> jsFiddle例子/strong>

您需要定义handlerOut。这应该行得通。https://jsfiddle.net/1g9p59bx/18/

$('.square').hover(function () {
    $(this).css({
        backgroundColor: '#FFFFFF'
    });
}, function() {
    $(this).css({
        backgroundColor: '#C8C8C8'
    });
});

为什么不把它放在你的css中呢?

.square:hover
{
    background-color: #FFFFFF;
}
相关文章：