仅当鼠标向下移动列表时激活'：悬停'并在鼠标向上移动时移除答案

【问题标题】：Activate ':hover' only when mouse moves down list and remove when mouse moves up仅当鼠标向下移动列表时激活'：悬停'并在鼠标向上移动时移除
【发布时间】：2018-05-05 10:01:26
【问题描述】：

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

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

但它不会删除任何:hover 效果，并且它使失败成为可能，只有第一个和第五个li 元素具有:hover 效果，但两者之间的所有内容都保持正常，我不想要.. . 你能帮帮我吗？

【问题讨论】：

试试.toggleClass('hover');
如果我希望它们是随机的，这可能会起作用......但只有例如不应该允许第一个和最后一个 li 元素具有悬停类...必须有某种 if 条件，我可以检查该 li 元素是否比先前切换的 li 元素在列表中更靠后.. 然后:将它们全部悬停到那个点...

标签： javascript jquery css

【解决方案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');
      });
    }

});

【讨论】：

【解决方案2】：

事实上，这完全可以用 css 来完成。这不需要 jQuery 或 JavaScript。你应该考虑使用一些像这样的 html 结构：

<ul>
   <li><span>Menu item 1</span></li>
   <li>
      <span>Menu item 2</span>
      <ul>
         <li><span>Submenu item 1</span></li>
         <li>
            <span>Submenu item 2</span>
            <ul>
               <li><span>Subsubmenu item 1</span></li>
               <li><span>Subsubmenu item 2</span></li>
               <li><span>Subsubmenu item 3</span></li>
            </ul>
         </li>
         <li><span>Submenu item 3</span></li>
      </ul>
   </li>
</ul>

那你就可以这样使用css了

li:hover > span {
    background: #9a0000;
}

查看这个 jsfiddle：https://jsfiddle.net/aey5cusm/

或者，如果您按单个列表的第一个、第二个、第三个，也可以使用 css 完成。

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul:hover li {
  background: #9a0000;
}

li:hover ~ li{
  background: none;
}

看看这个jsfiddle：https://jsfiddle.net/aey5cusm/1/

【讨论】：