对具有多个实例的每个元素执行jQuery操作

Question

假设我有5个div,都具有相同的样式:

小提琴

HTML

<div id="box"> </div>
<div id="box"> </div>
<div id="box"> </div>
<div id="box"> </div>
<div id="box"> </div>

CSS

#box {
    background-color:blue;
    width:200px;
    height:50px;
    display:block;
    margin-top:10px;
}

我想执行一些jQuery以更改每个特定div的颜色.mouseover(),并将其更改回原来的.mouseout():

jQuery的

$(document).ready(function() {
   $('#box').mouseover(function() {
      $('#box').css('background-color', 'red'); 
   });

    $('#box').mouseout(function() {
      $('#box').css('background-color', 'blue'); 
   });
});

这仅适用于div的第一个实例,我将如何为每个人做这项工作？我希望每个div都能像它自己一样工作,但我不知道该怎么做.

我研究并发现了,.each()但我对如何将其融入我的功能一无所知.有人可以帮帮我吗？先感谢您.

Answer 1

ID必须是唯一的.

您可以对所有元素使用相同的类.当你可以:hover在CSS中使用来改变悬停时元素的样式时,不需要使用Javascript .

更新小提琴

.box {
  background-color: blue;
  width: 200px;
  height: 50px;
  display: block;
  margin-top: 10px;
}
.box:hover {
  background: red;
}

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>