Javascript 使用jQuery更改div的颜色_Javascript_Jquery_Html_Css

Javascript 使用jQuery更改div的颜色

javascript jquery html css

Javascript 使用jQuery更改div的颜色,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在尝试使用jQuery更改单个div的颜色。我80%确信我的代码应该可以工作，但我不确定为什么它不能工作。我尝试过使用大量不同的方法，如mouseenter、hover、addClass、toggleClass等。但就我而言，我无法弄清楚到底发生了什么。请帮忙 JAVASCRIPT $(document).ready(function(){ blackMode(); genDivs(10); }); /* Black mode - changes colours of cells to

我正在尝试使用jQuery更改单个div的颜色。我80%确信我的代码应该可以工作，但我不确定为什么它不能工作。我尝试过使用大量不同的方法，如mouseenter、hover、addClass、toggleClass等。但就我而言，我无法弄清楚到底发生了什么。请帮忙

JAVASCRIPT

$(document).ready(function(){
blackMode();
genDivs(10);

});

/* Black mode - changes colours of cells to black */
function blackMode() {
$('.cell').hover(
    function (){
        $(this).css({"background-color":"black"});   
    },
    function (){
        $(this).css({"background-color":"white"});
    });
}

/* creates the divs in a 10x10 grid */

function genDivs(v) {
    var e = document.getElementById('container'); //This is what we want to append the rows
    for (var i = 0; i < v; i++) {
        var row = document.createElement("div"); // This creates each row that is selected.
        row.className="row"; // This declares the class name for the created div.
        for(var j = 0; j < v; j++) {
            var cell = document.createElement("div");
            cell.className="cell";
            row.appendChild(cell);
        }
        e.appendChild(row);
    }
}

$（文档）.ready（函数（）{
blackMode（）；
性别（10）；
});
/*黑色模式-将单元格颜色更改为黑色*/
函数blackMode（）{
$（'.cell'）。悬停(
函数（）{
$（this.css（{“背景色”：“黑色”}）；
},
函数（）{
$（this.css（{“背景色”：“白色”}）；
});
}
/*在10x10网格中创建div*/
功能genDivs（v）{
var e=document.getElementById（'container'）；//这就是我们要附加行的内容
对于（变量i=0；i


HTML
<html>
<head>
    <script type="text/javascript" src="jquery-1.11.3.min.js"></script>
    <script src="Script.js"></script>
    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Raleway" />
    <link rel="stylesheet" type="text/css" href="Stylesheet.css"></link>
</head>
<body>
    <h1 class="title">Etch-a-Sketch</h1>
    <div id="container">

    </div>
</body>


神奇画板

更新：
很抱歉，我没有注意到您实际上在动态插入的元素上使用了.cell类-但仍然给它们一些高度和更重要的->首先插入元素，然后使用jQuery绑定事件：
$(document).ready(function(){
    genDivs(10);
    blackMode();
});


以前的版本不起作用，因为在调用应用悬停处理程序的blackMode函数时，DOM中没有class.cell的元素
原始答复：
您正在对具有cell类的元素应用悬停函数，但在HTML中没有使用它。此外，当您的div没有内容时，它的高度将为0px，效果将不可见
将.cell类添加到您的div：
<div class="cell">
</div>


.cell {
    height: 400px;
}