javascript - 将鼠标悬停在一个上时，将同一父级的所有先前 li 悬停

Question

我在页面上有多个 div，里面有多个 li

<div>
<li></li>
<li></li>
<li></li>
</div>


<div>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</div>

我想要的是，当任何人悬停在任何 li 上时，它会触发悬停在该 li 上以及特定 div 的所有先前 li 上，或者至少在其上添加任何类，当悬停时从所有 li 中删除类

Answer 1

您可以使用 prevAll() 选择所有以前的 li，和 hover() 用于处理悬停事件

注意:您的 html 无效。元素 li 不允许作为元素 div 的子元素，li 应该是 ul 或 ol 的子元素

$('div li').hover(function() {
  $(this).addClass('hover').prevAll('li').addClass('hover');
}, function() {
  $(this).removeClass('hover').prevAll('li').removeClass('hover');
})

.hover {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</div>


<div>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
</div>