如何修改jQuery生成的div？

Question

在此处完成noob问题：

我有jQuery生成的div的16x16网格

 var rows = 16; var columns = 16; var $row = $("<div />", { class: 'row' }); var $square = $("<div />", { class: 'square' }); $(document).ready(function() { for (var i = 0; i < columns; i++) { $row.append($square.clone()); } for (var x = 0; x < rows; x++) { $(".box_main").append($row.clone()); } }); 

 .row { width: auto; height: 40px; background: #313131; } .square { width: 40px; height: 40px; border-radius: 10px; margin: 0; display: inline-block; background: #fff; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

我可以以某种方式使用addClass和removeClass（或其他任何方式）来将每个div悬停/鼠标移到它们的背景颜色上吗？

我尝试了一些方法，但是我什至不确定是否可以这样做。

Answer 1

不需要addClass() / removeClass() （甚至JS）-您可以仅使用CSS的:hover pseduo选择器来实现它。 尝试这个：

.square:hover {
  background: #C00; /* amend colour as needed */
}

工作示例：

 var rows = 16; var columns = 16; var $row = $("<div />", { class: 'row' }).appendTo('body'); var $square = $("<div />", { class: 'square' }); $(document).ready(function() { for (var i = 0; i < columns; i++) { $row.append($square.clone()); } for (var x = 0; x < rows; x++) { $(".box_main").append($row.clone()); } }); 

 body { background: #313131; } .row { width: auto; height: 40px; background: #313131; } .square { width: 40px; height: 40px; border-radius: 10px; margin: 0; display: inline-block; background: #fff; } .square:hover { background: #C00; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Answer 2

在:hover pseduo选择器旁边，您可能需要使用JS向其添加一个实际的类（也许如果被其他事件触发会更有意义），不过，这是一个使用JS的示例（addClass / removeClass）

 var rows = 16; var columns = 16; var $row = $("<div />", { class: 'row' }); var $square = $("<div />", { class: 'square' }); $row.appendTo('body'); $(document).ready(function() { for (var i = 0; i < columns; i++) { $row.append($square.clone()); } for (var x = 0; x < rows; x++) { $(".box_main").append($row.clone()); } $('.square').hover(function() { $(this).addClass('hovering'); }, function() { $(this).removeClass('hovering'); }); }); 

 .row { width: auto; height: 40px; background-color: #313131; } .square { width: 40px; height: 40px; border-radius: 10px; margin: 0; display: inline-block; background-color: #fff; } .hovering { background-color: cyan; border: 3px dashed blue; width: 34px; height: 34px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>