jQuery的悬停功能不改变类

Question

I've created a grid of pixels and want it to change to black when hovered. The problem is that the event is not working.

 $(document).ready(function() { function makeGrid(k) { var size = 320 / k; for (var i = 0; i < k; i++) { $(".container").append("<div class=row></div>"); } for (var j = 0; j < k; j++) { $(".row").append("<div class=square></div>"); } $('.square').css({ 'height': size, 'width': size }); } $('.square').hover(function() { $(this).addClass(".hover"); }) $('.reset').on('click', function() { $(".container").empty(); makeGrid(16); }) $('.start').on('click', function() { var n = prompt("Set the size"); $(".container").empty(); makeGrid(n); }) }) 

 .square { border-collapse: collapse; display: inline-block; } .container { text-align: -webkit-center; position: relative; top: 50px; margin: 0 auto; border: 1px solid #000000; width: 320px; height: 320px; border-collapse: collapse; } .row { clear: both; content: ""; height: 20px; } .hover { background-color: black; } button { text-align: center; background-color: white; display: inline-block; font-size: 20px; border-radius: 2px; top: 50%; } .wrap { text-align: -webkit-center; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div class="wrap"> <button class="clear">New Grid</button> <button class="start">Start</button> <button class="reset">Reset</button> </div> <div class="container"></div> 

Answer 1

Since you dynamically add your divs, you can't use .hover() and have to use .on() with mouseenter instead. Also when using .addClass() you just use the class' name with no period being prefixed.

 $(document).ready(function() { function makeGrid(k) { var size = 320 / k; for (var i = 0; i < k; i++) { $(".container").append("<div class=row></div>"); } for (var j = 0; j < k; j++) { $(".row").append("<div class=square></div>"); } $('.square').css({ 'height': size, 'width': size }); } $(document).on("mouseenter", ".square", function(e) { $(this).addClass("hover"); }); $('.reset').on('click', function() { $(".container").empty(); makeGrid(16); }) $('.start').on('click', function() { var n = prompt("Set the size"); $(".container").empty(); makeGrid(n); }) }) 

 .square { border-collapse: collapse; display: inline-block; } .container { text-align: -webkit-center; position: relative; top: 50px; margin: 0 auto; border: 1px solid #000000; width: 320px; height: 320px; border-collapse: collapse; } .row { clear: both; content: ""; height: 20px; } .hover { background-color: black; } button { text-align: center; background-color: white; display: inline-block; font-size: 20px; border-radius: 2px; top: 50%; } .wrap { text-align: -webkit-center; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div class="wrap"> <button class="clear">New Grid</button> <button class="start">Start</button> <button class="reset">Reset</button> </div> <div class="container"></div>