javascript - 仅当鼠标向下移动时激活 ':hover' 列表，当鼠标向上移动时移除

Question

所以我必须实现一个 Jquery 函数，其中每个 li 元素都在执行 :hover 伪类(它只改变背景颜色)。因此，如果我向下悬停到第 4 个元素，所有以前的 li 元素(第 1、第 2、第 3)应该从 :hover 伪类更改背景颜色!但是如果我再次用鼠标向上移动 :hover 效果应该消失(再次是正常的背景颜色)直到我的鼠标所在的位置(如果它在第二个元素上只有第一个和第二个有悬停现在生效)...我完全不知道如何创建这样的方法...我做了类似的事情

$('ul li').on('mouseenter') { 
$(this).addClass('hover'); //alternatively $(this).css('background-color', 'grey'); 
}

但它不会删除任何 :hover 效果，并且它可能会导致失败，例如只有第一个和第 5 个 li 元素具有 :hover 效果，但两者之间的一切都保持正常，这是我不想要的......你能帮帮我吗？

Answer 1

Link to working example on jsfiddle.net

---

所以让我们从列表的一些示例标记开始:

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

然后为您的“悬停”添加一些 CSS:

.hover {
  background-color: red;
} 

还有一些 javascript 来提供功能:

$(function(){

    // Our list items.
    var listItems = $('ul').children();

    // An event listener over all list items.
    $('li').hover(hoverIn, hoverOut);

    // Find the index of the current element
    // and set all elements up to this element as hover.
    function hoverIn() {
       var index = listItems.index(this);
       $.each(listItems, function(idx, ele) {
          if (idx <= index) {
              $(this).addClass('hover');
          } else {
              $(this).removeClass('hover');
          }
       });
    }

    // Remove all hover.
    function hoverOut() {
      $.each(listItems, function(idx, ele) {
        $(this).removeClass('hover');
      });
    }

});