如何保持懸停後下拉導航打開？

這是我的代碼jsbin link。正如你所看到的，只要我從觸發器上懸停，下拉菜單就會關閉，導致導航無效。如何保持懸停後下拉導航打開？

任何簡單的解決方案將是非常受歡迎的。提前致謝。

HTML

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://code.jquery.com/jquery-2.1.4.js"></script> 
    <meta charset="utf-8"> 
    <title>JS Bin</title> 
</head> 
<body> 
<header> 
    <p>Menu</p> 
    <ul> 
    <li>list</li> 
    <li>list</li> 
    <li>list</li> 
    <li>list</li> 
    </ul> 
</header> 
</body> 
</html>

SASS

* 
    margin: 0 

header 
    padding: 20px 
    background-color: tomato 
    p 
    display: inline 
    padding: 5px 10px 
    background-color: blue 
    color: white 
    &:hover 
     cursor: pointer 
    ul 
    padding: 10px 
    background-color: blue 
    list-style: none 
    color: white 
    width: 60px 
    display: none

$(function(){ 
    $("p").hover(function(){ 
    $("ul").slideToggle(); 
    }); 
});

來源

2015-11-04 Eli Tamosauskas

'mouseenter' /'在格mouseleave' – melancia

包裝和使用懸停的DIV http://jsfiddle.net/mohamedyousef1980/wfw1f9to/1/ –

$(function(){ 
    $("p").hover(function(){ 
    $("ul").show();  
    }); 
    $("ul").hover(function(){}, function(){ 
    $(this).hide(); 
    }); 
});

來源

2015-11-04 16:26:25

是但隨後它停留在那裏，一旦我懸停在盒子外面，我該如何讓它消失？ –

@EliTamosauskas我已經更新了答案。你的意思是？ – 2015-11-04 16:36:07

你不需要JS這一點。使用方法：將鼠標懸停在你的CSS：

header:hover ul { 
    display:block; 
}

http://jsfiddle.net/wfw1f9to/3/

來源

2015-11-04 16:29:07 Cruiser

如何保持懸停後下拉導航打開？

回答

相關問題