[英]Fade in and fade out elements with hover in 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>
我将您的第二个菜单ID更改为#drop-two。
$(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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.