淡入淡出jQuery中悬停的元素

我正在使用菜单。如果用户将光标移动到菜单的主要元素上，它将显示一个子菜单（它有一个隐藏延迟），但是如果将光标移动到另一个主体元素上，则前一个元素仍然会显示在新元素的后面（并且只是通过延迟隐藏）。淡入淡出jQuery中悬停的元素

当我将光标移到另一个主体元素上时，如何隐藏前一个元素？

下面是菜单：

$('li.dropdown').hover(function() { 
 
    $(this).find('.dropdown-menu').stop(true, true).delay(100).fadeIn(100); 
 
}, function() { 
 
    $(this).find('.dropdown-menu').stop(true, true).delay(1000).fadeOut(100); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<ul id="main-menu" class="nav navbar-nav ref"> 
 
    <li class="dropdown dropdown-large option"> 
 
    <a id="drop-to" href="#" class="dropdown-toggle firstTextOption">P element</a> 
 
    <ul class="dropdown-menu dropdown-menu-large row change-f"> 
 
     <li class="col-sm-4 option-sm"> 
 
     <ul> 
 
      <li> </li> 
 
      <li class="dropdown-header title"><a href="#">subelement</a></li> 
 
      <li class="dropdown-header title"><a href="#">subelement</a></li> 
 
      <li class="dropdown-header title"><a href="#">subelement</a></li> 
 
      <li> </li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li class="dropdown dropdown-large option"> 
 
    <a id="drop-to" href="#" class="dropdown-toggle firstTextOption">P element</a> 
 
    <ul class="dropdown-menu dropdown-menu-large row change-f"> 
 
     <li class="col-sm-4 option-sm"> 
 
     <ul> 
 
      <li> </li> 
 
      <li class="dropdown-header title"><a href="#">subelement</a></li> 
 
      <li class="dropdown-header title"><a href="#">subelement</a></li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
</ul>

来源

2017-08-30 victor

它会真正帮助，如果你想添加一个小提琴（： –

你并不需要一个小提琴;该代码可以从一个堆栈段执行我格式化代码并把它放入其中:) –

@ObsidianAge谢谢，我需要了解我该如何做到这些！ – victor

我改变你的第二个菜单ID，以＃降两。

$(document).ready(function(){ 
 
    $('.dropdown-menu, .dropdown-menu2').hide(); 
 
    
 
    $('#drop-to').mouseover(function() { 
 
    $('.dropdown-menu').fadeIn(); 
 
    }) 
 
    
 
    $('#drop-to').mouseout(function() { 
 
    $('.dropdown-menu').fadeOut(1000); 
 
    }) 
 
    
 
    $('#drop-two').mouseover(function() { 
 
    $('.dropdown-menu2').fadeIn(); 
 
    }) 
 
    
 
    $('#drop-two').mouseout(function() { 
 
    $('.dropdown-menu2').fadeOut(1000); 
 
    }) 
 
    
 

 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<ul id="main-menu" class="nav navbar-nav ref"> 
 
    <li class="dropdown dropdown-large option"> 
 
    <a id="drop-to" href="#" class="dropdown-toggle firstTextOption">P element</a> 
 
    <ul class="dropdown-menu dropdown-menu-large row change-f"> 
 
     <li class="col-sm-4 option-sm"> 
 
     <ul> 
 
      <li> </li> 
 
      <li class="dropdown-header title"><a href="#">subelement</a></li> 
 
      <li class="dropdown-header title"><a href="#">subelement</a></li> 
 
      <li class="dropdown-header title"><a href="#">subelement</a></li> 
 
      <li> </li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li class="dropdown dropdown-large option"> 
 
    <a id="drop-two" href="#" class="dropdown-toggle firstTextOption">P element</a> 
 
    <ul class="dropdown-menu2 dropdown-menu-large row change-f"> 
 
     <li class="col-sm-4 option-sm"> 
 
     <ul> 
 
      <li> </li> 
 
      <li class="dropdown-header title"><a href="#">subelement</a></li> 
 
      <li class="dropdown-header title"><a href="#">subelement</a></li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
</ul>

来源

2017-08-30 00:35:48

我使用了hide（）和show（），但它也适用于fadeIn（）和fadeOut（）。 –

这里的问题是，如果我将光标自动移动到另一个元素的子菜单将隐藏，我希望子菜单等待特定的时间来隐藏 – victor

我改变了我的代码一点点。这更像你要找的东西吗？ –

淡入淡出jQuery中悬停的元素

回答

相关问题