Javascript 悬停时div css未更改

我有一个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'}) ;
});

vard=（“”）；
var值=[]；
函数createGrid（numSquares）{
变量面积=$（“#g#U面积”）；
var squareSize=Math.floor（area.innerWidth（）/numSquares）；
var n=0；
对于（变量i=0，len=（numSquares*numSquares）；i

---

JSFIDLE:

您的悬停语法不正确，需要传递两个函数：

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

---

您的悬停语法不正确，需要传递两个函数：

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

---

为什么不把这个放在css上呢

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

---

为什么不把这个放在你的css上呢

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

---

您需要定义handlerOut。 这应该行得通

---

您需要定义handlerOut。 这应该行得通

---

谢谢这是可行的，但只适用于JSFIDLE。由于某种原因，当我在本地更新脚本时，什么也没有发生。有什么线索可以解释为什么会这样吗？代码与示例中显示的完全相同。请尝试清除页面上的本地浏览器缓存。Ctrl+F5通常有效。看看这个：刚刚试过，运气不好。奇怪的是，它在JSFIDLE中工作得很好。您的控制台中有错误吗？F12打开控制台，检查是否有任何javascript错误。默认情况下，JSFIDLE将代码包装在窗口onload调用中。谢谢！这是可行的，但只适用于JSFIDLE。由于某种原因，当我在本地更新脚本时，什么也没有发生。有什么线索可以解释为什么会这样吗？代码与示例中显示的完全相同。请尝试清除页面上的本地浏览器缓存。Ctrl+F5通常有效。看看这个：刚刚试过，运气不好。奇怪的是，它在JSFIDLE中工作得很好。您的控制台中有错误吗？F12打开控制台，检查是否有任何javascript错误。默认情况下，JSFIDLE将代码包装在窗口onload调用中。谢谢！这是可行的，但只适用于JSFIDLE。由于某种原因，当我在本地更新脚本时，什么也没有发生。有什么线索可以解释为什么会这样吗？代码与示例中显示的完全相同。不，我只需要正确包装它。谢谢！这是可行的，但只适用于JSFIDLE。由于某种原因，当我在本地更新脚本时，什么也没有发生。有什么线索可以解释为什么会这样吗？代码与示例中显示的完全相同。不，我只需要正确地包装它。