jquery帮助使用.each（）隐藏/显示图标和显示背景色来分配多个鼠标事件

需要一些帮助来指定鼠标悬停事件以显示一些开始隐藏的图标

对于

ul

中的每个

，我都有图标。当用户将鼠标悬停在

上时，我希望显示带有名为“icons”的类的span标记。当鼠标移出事件发生时，移除类和/或仅隐藏跨度。我面临的问题是如何分配事件，以便当鼠标悬停在

上时，仅显示span标记及其内容

以下是HTML：

<ul id="nav">
     <li>Cat 1
          <span class="icons">
              <div>stuff here</div>
          </span>
     </li>
     <li>Cat 2
          <span class="icons">
              <div>stuff here</div>
          </span>
             <ul>
                 <li>Sub Cat 2A
                     <span class="icons">
                         <div>2A stuff here</div>
                     </span>
                 </li>
             </ul>  
     </li>
</ul>

---

谢谢您的帮助。

您不需要为此使用

each（）

函数。

mouseout（）

和

mouseover（）

函数将应用于选择器返回的所有元素

$('#nav li').mouseover(function(){ 
    ...
}).mouseout(function(){ 
    ...
});

现在，要访问悬停元素内部的跨度，可以使用

find（）

函数

    $(this).find("span").removeClass("icons"); 

    $(this).find("span").addClass("icons"); 

最后，您应该优先使用

mouseenter/mouseleave

，而不是

mouseover/mouseout

，因为您不希望在输入

span

元素时触发隐藏事件

$('#nav li').mouseenter(function(){ 
    $(this).addClass("background_grey")
    .find("span").removeClass("icons"); 
}).mouseleave(function(){ 
    $(this).removeClass("background_grey")
    .find("span").addClass("icons"); 
});

---

您不需要为此使用

each（）

函数。

mouseout（）

和

mouseover（）

函数将应用于选择器返回的所有元素

$('#nav li').mouseover(function(){ 
    ...
}).mouseout(function(){ 
    ...
});

现在，要访问悬停元素内部的跨度，可以使用

find（）

函数

    $(this).find("span").removeClass("icons"); 

    $(this).find("span").addClass("icons"); 

最后，您应该优先使用

mouseenter/mouseleave

，而不是

mouseover/mouseout

，因为您不希望在输入

span

元素时触发隐藏事件

$('#nav li').mouseenter(function(){ 
    $(this).addClass("background_grey")
    .find("span").removeClass("icons"); 
}).mouseleave(function(){ 
    $(this).removeClass("background_grey")
    .find("span").addClass("icons"); 
});

---

您可以使用以下方法将其全部缩短：

$('#nav li').hover(function(){
  $(this).toggleClass("background_grey").find(".icons").toggle(); 
});

---

这将切换背景类，无论

。图标是否显示在悬停状态，鼠标是否显示在鼠标悬停状态。
您可以使用以下命令将其全部缩短：

$('#nav li').hover(function(){
  $(this).toggleClass("background_grey").find(".icons").toggle(); 
});

这将切换背景类，无论
.icons
跨度是否显示在鼠标悬停位置，鼠标悬停位置是否显示在鼠标悬停位置。
谢谢Joel。这正是我需要的。我甚至没有想过使用.find（）…这是我的noobie凭证。再次感谢，谢谢乔尔。这正是我需要的。我甚至没有想过使用.find（）…这是我的noobie凭证。再次感谢。@Ronedog-添加了另一个选项，可能更容易维护，请注意您的选项较短：）@Ronedog-添加了另一个选项，可能更容易维护，请注意您的选项较短：）