Question

在这里完成noob问题：

我有这个由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） - 你可以单独使用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>

如何修改jQuery生成的div？

2 个答案: