在鼠標懸停後打開div並保持打開狀態，直到鼠標移出？

我有我類似這樣的標記：在鼠標懸停後打開div並保持打開狀態，直到鼠標移出？

<div class="wrapper-header"> 
<div class="container"> 
<div class="navbar"> 
<ul class="nav navbar-nav"> 
<li class=""><a href="#" class="toggle">Show Categories</a></li> 
</ul> 
</div> 
</div> 

<div class="wrapper-categories"> 
<div class="container"> 
Content Here 
</div> 
</div>

的.wrapper-categories是display: none;默認情況下，所以這隻能說明曾經與點擊：

$(".toggle").on('click', function (event){ 
       event.preventDefault(); 
       $(".wrapper-categories").slideToggle("fast"); 
       $(this).html(function(i,html) { 
        if (html.indexOf('Browse') != -1){ 
         html = html.replace('Show','Hide'); 
        } else { 
         html = html.replace('Hide','Show'); 
        } 
        return html; 
       }); 
      });

現在，我想改變這種狀況，以顯示對hover而不是click，而.wrapper-categories保持打開狀態，如果有人將鼠標移過來並關閉，如果它不在鏈接或內容div上。

我試圖更換它改爲$(".toggle").hover(function() {和那工作，但它不保持打開。我還要做什麼？

來源

2015-06-21 user1227914

你能給小提琴嗎？ – Varun

不久後會發佈，是:) – user1227914

您的代碼無法按照您的要求操作，因爲.toggle的懸停事件僅適用於其自身。只要您嘗試將鼠標光標移動到其內容即即.wrapper-categories之下，光標就會退出.toggle範圍。

下面是您需要如何實現這個的工作示例。您需要使用簡單結構ul和li稍微更改要創建的菜單結構。

這裏是FIDDLE。

HTML：

<ul class="nav navbar-nav"> 
<li class="menu"><a href="#" class="toggle">Show Categories</a> 
    <ul> 
     <li> 
      Content Here 
     </li> 
     <li> 
      Content Here 
     </li> 
     <li> 
      Content Here 
     </li> 

    </ul> 
</li> 
</ul>

JS：

$(".menu").mouseover(function(){ 
    $(this).find('ul').css('visibility', 'visible');  
}); 
$(".menu").mouseout(function(){ 
    $(this).find('ul').css('visibility', 'hidden'); 
});

CSS：

.menu > ul{ 
    visibility:hidden; 
} 
.menu > ul > li:hover{ 
    font-weight:bold; 
}

來源

2015-06-21 08:29:19

謝謝你的回答。這是有道理的，但不幸的是，由於網站的結構，我不能移動它的兩個單獨的包裝或內容。他們必須保持獨立的包裝。 – user1227914

好的。那麼我想只有onClick纔有可能。祝你好運， –

這裏是你的問題的解決方案。 https://jsfiddle.net/44wrL4g4/2/

我把所有的東西都包裝在menu類中。

而且我已經使用mouseleave()而不是mouseout()。有關這些功能，請參閱Jquery文檔。

請參閱代碼以獲得進一步的理解。

來源

2015-06-21 09:31:00 ClementBresson

在鼠標懸停後打開div並保持打開狀態，直到鼠標移出？

回答

相關問題