如何修改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>