jQuery的下拉鼠标移出时，DIV

的鼠标移开只能出去当用户进入的DIV之外之外。因此，他们可以将鼠标悬停在链接等，这只是停留扩大它不回去

JS小提琴和DEMO（http://jsfiddle.net/GHaL7/3/）

jQuery的

$(document).ready(function() { 
    $("#hoverButton").mouseover(function() { 
     $('div.hoverMenu').slideDown(2000) 
    }); 
    $("div.hoverMenu").mouseout(function() { 
     $('div.hoverMenu').slideUp(2000) 
    }); 
});

CSS/HTML

<style type="text/css"> 
.grooveKhaleelMenu{position:relative;z-index:10000} 
.hoverMenu{display:none;width:233px;height:350px;position:absolute;top:26px} 
div.hoverMenu ul li{margin-top:2px;margin-bottom:2px} 
div.hoverMenu ul li a span{font-size:16px !important} 
.nav_zone{float:left;height:24px;margin:0;padding:0;position:relative;z-index:10000} 
.nav_menu li{float:left;margin-right:1px;overflow:hidden;width:233px;height:24px;display:block} 
.nav_menu a{display:block;margin-top:0px;padding-bottom:2px;text-decoration:none;font-size:18px} 
.newshop{position:relative;z-index:700} 
.grooveKhaleelMenu li, .grooveKhaleelMenu li a{color:#fff;text-align:center} 
.blackLink{background:#000} 
.blackLink:hover{background:#525252} 
.redLink{background:#d40f20} 
.redLink:hover{background:#e82e22} 
</style> 




<div class="shoulders topofthedress"> 
    <div class="nav_zone"> 
     <nav> 
      <ul class="nav_menu grooveKhaleelMenu"> 
       <li class="blackLink" id="hoverButton"><a href="/shop" title="Shop all"><span>SHOP</span></a></li> 
       <div class="hoverMenu"> 
        <ul> 
         <li class="blackLink"><a href="/shop/cat/sub" title="Sub Cat"><span>Sub Cat</span></a></li> 
           <li class="blackLink"><a href="/shop/cat/sub" title="Sub Cat"><span>Sub Cat</span></a></li> 
           <li class="blackLink"><a href="/shop/cat/sub" title="Sub Cat"><span>Sub Cat</span></a></li> 
           <li class="blackLink"><a href="/shop/cat/sub" title="Sub Cat"><span>Sub Cat</span></a></li> 
           <li class="blackLink"><a href="/shop/cat/sub" title="Sub Cat"><span>Sub Cat</span></a></li> 
           <li class="blackLink"><a href="/shop/cat/sub" title="Sub Cat"><span>Sub Cat</span></a></li> 
         <li class="blackLink"><a href="/shop/cat/sub" title="Sub Cat"><span>Sub Cat</span></a></li> 
         <li class="redLink"><a href="/shop/cat/sub" title="Sub Cat"><span>Sub Sale Cat</span></a></li> 
        </ul> 
       </div> 
       <li class="blackLink"><a href="/shop/cat"><span>Shop Cat</span></a></li> 
       <li class="blackLink"><a href="/shop/cat"><span>Shop Cat</span></a></li> 
       <li class="redLink"><a href="/shop/cat"><span>Sale Cat</span></a></li> 
      </ul> 
     </nav> 
    </div> 
</div>

来源

2012-08-08 TheBlackBenzKid

首先，你有两个效果基本show，但是这是行不通的，因为有一个上边距和下边距，以独立的子菜单等等这一切看起来并不黑。我得到了什么你正在尝试，但我不能确定它 – M1th 2012-08-08 10:58:35

@TheBlackBenzkid检查到这个http://jsfiddle.net/GHaL7/3/ – 2012-08-08 11:10:16

它不起作用@RohitAzad感谢您的帖子 - 它滑过，你甚至可以点击SUB CAT之前.. – TheBlackBenzKid 2012-08-08 11:20:12

为什么不在你的脚本中使用slideUp（）？

可能的解决方案：http://jsfiddle.net/GHaL7/23/

来源

2012-08-08 10:53:58 stetro

我认为，因为他在子菜单之间存在空白差距，所以即使您在这些子菜单之间移动鼠标，它仍然不会保持固定。 – M1th 2012-08-08 10:57:55

确定比您需要添加背景包装来解决它。 – stetro 2012-08-08 11:00:27

你能告诉我JSFiddle吗？也请不要删除你的答案。其他人只是发布和删除，因为他们无法解决。 – M1th 2012-08-08 11:05:36

jQuery的下拉鼠标移出时，DIV

回答

相关问题