jquery - 更改多个元素的类

Question

我想更改悬停右侧(包括)和悬停左侧的所有元素的类。

HTML:

<div id="head_1" class="left_head active"></div>
<div id="head_2" class="middle_head active"></div>
<div id="head_3" class="middle_head active"></div>
<div id="head_4" class="middle_head inactive"></div>
<div id="head_5" class="middle_head inactive"></div>

它是这样的:

现在，当我将鼠标悬停在第三个头上时，我希望左侧的所有头都将类从非事件状态更改为事件状态，并将右侧的所有头从事件状态更改为非事件状态(如果它们之前是事件的)

Answer 1

$("div").hover(
  function () {
    $(this).addClass("active");
    $(this).prevAll().addClass("active");
  }, 
  function () {
    $(this).removeClass("active");
    $(this).prevAll().removeClass("active");
  }
);

div {
    width: 20px;
    height: 20px;
    display: inline-block;
    background-color: grey;
    border: 1px solid black;
    margin: 5px;
}

.active {
    background-color: yellow;
}

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