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

回答

相關問題