如何在鼠標懸停後讓子菜單div保持（可見）？

我在完成這項工作時遇到問題。我有一個子菜單容器（.subOptions），當將鼠標懸停在<li>標籤上時，它將變爲visible (display:block)。如何在鼠標懸停後讓子菜單div保持（可見）？

問題：現在當鼠標移出按鈕或div（.subOptions）div變得隱藏。

我需要以某種方式在頁面加載，第一個Button1及其子菜單div是可見的，而當鼠標移出div時（只在懸停在其他按鈕上時才更改）可見。

<ul class="clearfix submenu"> 
     <li> 
      <a>Button1</a> 
      <div class="subOptions"> 
       Button 1 Content 
      </div> 
     </li> 
     <li> 
      <a>Button2</a> 
      <div class="subOptions"> 
       Button 2 Content 
      </div> 
     </li> 
     <li> 
      <a>Button3</a> 
      <div class="subOptions"> 
       Button 3 Content 
      </div> 
     </li>         
     <li> 
      <a>Button4</a> 
      <div class="subOptions">  
       Button 4 Content 
      </div> 
    </li> 
<ul>

任何工作解決方案將受到高度讚賞。我希望我解釋清楚。

這裏是例子：jsFiddle

來源

2014-12-01 eMTH

您需要檢查懸停狀態，當只改變選擇了不同的按鈕。

(function($) { 

var activeSubmenuIndex; 
$('.submenu li').on('mouseenter', 
    function() { 
     //return if it's the same button being hovered 
     if ($(this).index() === activeSubmenuIndex) { 
      return; 
     } 
     //remove classes from other buttons, put on new active one 
     $('.submenu li').removeClass('submenuHover'); 
     $('.submenu li a').removeClass('aHover'); 
     //add class for li element 
     $(this).addClass('submenuHover'); 
     $(this).find('a').addClass('aHover') 
    }); 
})(jQuery);

我還將兩個懸停CSS類更改爲由JS添加的常規類。這是一個工作小提琴。 http://jsfiddle.net/arbt0896/2/

來源

2014-12-01 17:13:48 jbarnett

這就是我一直在尋找的！非常感謝你！！ – eMTH 2014-12-01 17:38:10

沒問題@ Marduk007 :) – jbarnett 2014-12-03 16:01:50

你可以得到大多有與CSS：

ul.submenu li:first-child { background:#fff; } 
ul.submenu:hover li:first-child { background:#efefc8; } 
ul.submenu:hover li:hover:first-child { background:#fff; }

http://jsfiddle.net/arbt0896/1/

來源

2014-12-01 17:05:04 superUntitled

如何在鼠標懸停後讓子菜單div保持（可見）？

回答

相關問題