Javascript 激活'；：悬停'；仅当鼠标向下移动时，列表才会显示，当鼠标向上移动时，列表才会删除

因此，我必须实现一个Jquery函数，其中每个

li

元素都在执行

：hover

伪类（只更改背景色）。因此，如果我将鼠标悬停到第4个元素，所有先前的

li

元素（第1、第2、第3个）的背景色都应该与

：hover

伪类的背景色不同！！但是如果我再次用鼠标向上移动，

：hover

效果应该消失（再次使用正常背景色）直到我的鼠标所在的位置（如果它位于第二个元素上，则现在只有第1个和第2个元素具有悬停效果）。。。我完全不知道我怎样才能创造出这样一种方法。。。我做了一些类似的事情

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

---

但它不会移除任何

：hover

效果，并且它使类似这样的故障成为可能，只有第一个和第五个

li

元素具有

：hover

效果，但两者之间保持正常，我不希望。。。你能帮我吗？

事实上，这完全可以用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>

请参阅此JSFIDLE：

或者，如果您按单个列表的第一个、第二个、第三个排序，也可以使用css进行排序

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

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

li:hover ~ li{
  background: none;
}

---

看看这个JSFIDLE:

事实上，这完全可以通过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>

请参阅此JSFIDLE：

或者，如果您按单个列表的第一个、第二个、第三个排序，也可以使用css进行排序

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

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

li:hover ~ li{
  background: none;
}

看看这个jsfiddle:

---

因此，让我们从列表的一些示例标记开始：

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

和一些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');
      });
    }

}); 

$（函数（）{
//我们的清单项目。
var listItems=$（'ul'）.children（）；
//所有列表项上的事件侦听器。
$（'li'）。悬停（悬停在，悬停在）；
//查找当前元素的索引
//并将此元素的所有元素设置为悬停。
函数hoverIn（）{
var index=listItems.index（本）；
$.each（列表项、函数（idx、ele）{
如果（idx


因此，让我们从列表的一些示例标记开始：

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

和一些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');
      });
    }

}); 

$（函数（）{
//我们的清单项目。
var listItems=$（'ul'）.children（）；
//所有列表项上的事件侦听器。
$（'li'）。悬停（悬停在，悬停在）；
//查找当前元素的索引
//并将此元素的所有元素设置为悬停。
函数hoverIn（）{
var index=listItems.index（本）；
$.each（列表项、函数（idx、ele）{
if（idx Try
.toggleClass（'hover'））
如果我希望它们是随机的，这可能会起作用……但是不允许仅第一个和最后一个li元素具有hover类的情况……必须存在某种if条件，我可以检查该li元素是否比之前切换的li元素在列表中的位置要低……然后：将它们全部悬停到该点……Try
.toggleClass（'hover'））
如果我希望它们是随机的，这可能会起作用……但是不允许只允许第一个和最后一个li元素具有hover类的情况……必须存在某种if条件，在该条件下，我可以检查该li元素是否比之前切换的li元素在列表中的位置低很多……然后：将它们全部悬停到该点。。。