将鼠标悬停在一个上时，将同一父级的所有先前 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 上，或者至少在其上添加任何 class 并且悬停时从所有 li

中删除 class

Answer 1

您可以使用prevAll() to select all previous li, and 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>

Answer 2

是否允许 <li></li> 作为 <div></div> 的 child？据我所知，我们不能那样做...他们必须是 <ol></ol> 或 <ul></ul>...

的 children

您可以检查一下，然后尝试使用 prevAll()

问候！

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

Hover all previous li of same parent when hovering on one

html

javascript

css

jquery

hover