javascript - 如何修改jQuery生成的div？

Question

在这里完成菜鸟问题:

我有这个由 jQuery 生成的 16x16 的 div 网格

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)不是必需的 - 您可以使用 :hover 实现它单独的 CSS 伪选择器。试试这个:

.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>