不能移動光標到鼠標懸停的子菜單

我有一個子菜單創建菜單，只有我做的是子菜單放在UL以外（因爲我沒有選擇），問題是我無法移動光標至子菜單，我想檢查是否有與菜單和子菜單，但沒有任何線索..斷開不能移動光標到鼠標懸停的子菜單

這裏是JSFiddle工作演示

CSS

<style> 
.nav{ float: right; margin: 22px 0 0; padding: 0; } 
.nav ul{ float: right; margin: 0; padding: 0; font-size: 16px; } 
.nav ul li{ float: left; margin: 0; padding: 0; /*position: relative;*/ display:block; padding:0 0 40px 0;} 
.nav > ul > li > a{ color: #771521; padding:8px 15px 8px 15px; } 
.nav ul li a:hover{text-decoration: underline;} 

/*-----------Sub menu -----------*/ 
.submenu_willwid{position:absolute; width:100%; background:rgba(0,0,0,0.65); top:90px; padding:10px; box-sizing:border-box; display:none; z-index:101; min-height:195px; box-shadow:0px 7px 8px -4px rgba(0, 0, 0, 0.68); left:0;} 
.menu_inner{width:100%; max-width:1200px; margin:0 auto;} 
.submenu_col_full{width:20%; float:left;} 
.submenu_col_full > h4{font-size:14px; color:#fff; text-transform:uppercase; font-weight:400; text-align:center; padding:0 0 10px 0;} 
.submenu_col_full > h4 > a{color:#fff; text-decoration:none;} 
.submenu_willwid:after, .submenu_willwid:before {bottom: 100%; left: 51.5%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none;} 
.submenu_willwid:after {border-color: rgba(0, 0, 0, 0);border-bottom-color: rgba(0, 0, 0, 0.68); border-width: 12px; margin-left: -12px;} 
.submenu_willwid2:after, .submenu_willwid2:before {bottom: 100%; left: 59%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none;} 
.submenu_willwid2:after {border-color: rgba(0, 0, 0, 0);border-bottom-color: rgba(0, 0, 0, 0.68); border-width: 12px; margin-left: -12px;} 
</sryle>

HTML

 <nav class="nav animated fadeInUp m1"> 
    <ul> 
     <li id="menu1"> <a href="javascript:;">About Us</a> </li> 
     <li id="menu2"><a href="companies.html">Our Group Companies</a></li> 
     <li><a href="#">Investor Relations</a></li> 
     <li><a href="#">Social Responsibility</a></li> 
     <li><a href="#">Careers</a></li> 
     <li><a href="#">Media/News</a></li> 
     <li><a href="#">Contact Us</a></li> 
    </ul> 
    </nav> 
    <div class="submenu_willwid" id="submenu1"> 
    <div class="menu_inner"> 
     <div class="submenu_col_full"> 
     <div class="rot_box"> 
      <div class="rot_box_inner"><a href="company-at-glance.html"><img src="images/menu-tri-1.png"> 
      <div class="hov"></div> 
      </a></div> 
     </div> 
     <h4><a href="company-at-glance.html">company at a Glance</a></h4> 
     </div> 
     <div class="submenu_col_full"> 
     <div class="rot_box"> 
      <div class="rot_box_inner"><a href="vision.html"><img src="images/menu-tri-2.png"> 
      <div class="hov"></div> 
      </a></div> 
     </div> 
     <h4><a href="vision.html">Vision and Mission</a></h4> 
     </div> 
     <div class="submenu_col_full"> 
     <div class="rot_box"> 
      <div class="rot_box_inner"><a href="history.html"><img src="images/menu-tri-3.png"> 
      <div class="hov"></div> 
      </a></div> 
     </div> 
     <h4><a href="history.html">Our History</a></h4> 
     </div> 
     <div class="submenu_col_full"> 
     <div class="rot_box"> 
      <div class="rot_box_inner"><a href="our-strategy.html"><img src="images/menu-tri-4.png"> 
      <div class="hov"></div> 
      </a></div> 
     </div> 
     <h4><a href="our-strategy.html">Our Strategy</a></h4> 
     </div> 
     <div class="submenu_col_full"> 
     <div class="rot_box"> 
      <div class="rot_box_inner"><a href="board-members.html"><img src="images/menu-tri-5.png"> 
      <div class="hov"></div> 
      </a></div> 
     </div> 
     <h4><a href="board-members.html">Board Members</a></h4> 
     </div> 
    </div> 
    </div> 
    <div class="submenu_willwid submenu_willwid2" id="submenu2"> 
    <div class="menu_inner"> 
     <div class="submenu_col_full"> 
     <div class="rot_box"> 
      <div class="rot_box_inner"><a href="company-at-glance.html"><img src="images/menu-tri-1.png"> 
      <div class="hov"></div> 
      </a></div> 
     </div> 
     <h4><a href="company-at-glance.html">company at a Glance 2</a></h4> 
     </div> 
     <div class="submenu_col_full"> 
     <div class="rot_box"> 
      <div class="rot_box_inner"><a href="vision.html"><img src="images/menu-tri-2.png"> 
      <div class="hov"></div> 
      </a></div> 
     </div> 
     <h4><a href="vision.html">Vision and Mission</a></h4> 
     </div> 
     <div class="submenu_col_full"> 
     <div class="rot_box"> 
      <div class="rot_box_inner"><a href="history.html"><img src="images/menu-tri-3.png"> 
      <div class="hov"></div> 
      </a></div> 
     </div> 
     <h4><a href="history.html">Our History</a></h4> 
     </div> 
     <div class="submenu_col_full"> 
     <div class="rot_box"> 
      <div class="rot_box_inner"><a href="our-strategy.html"><img src="images/menu-tri-4.png"> 
      <div class="hov"></div> 
      </a></div> 
     </div> 
     <h4><a href="our-strategy.html">Our Strategy</a></h4> 
     </div> 
     <div class="submenu_col_full"> 
     <div class="rot_box"> 
      <div class="rot_box_inner"><a href="board-members.html"><img src="images/menu-tri-5.png"> 
      <div class="hov"></div> 
      </a></div> 
     </div> 
     <h4><a href="board-members.html">Board Members</a></h4> 
     </div> 
    </div> 
    </div>

JQuery的

$('#menu1').mouseover(function(){ 
    $('#submenu1').fadeIn(); 
}); 
$('#menu1').mouseleave(function(){ 
    $('#submenu1').fadeOut(); 
}); 

//Menu 2 
$('#menu2').mouseover(function(){ 
    $('#submenu2').fadeIn(); 
}); 
$('#menu2').mouseleave(function(){ 
    $('#submenu2').fadeOut(); 
});

來源

2016-08-16 Sanjeev Kumar

尋找這樣的事情[** **的jsfiddle（https://jsfiddle.net/vivekkupadhyay/qsyg958b/4）？ – vivekkupadhyay

是的是這樣的，但我沒有選擇在LI內移動HTML有沒有選擇而不改變HTML結構？ –

不，首先它不是一個有效的結構來製作一個菜單的子菜單，其次當你將鼠標移動到子菜單時，它將離開「li」區域，它使第二個條件成爲真正的子菜單獲得'fadeOut'。 – vivekkupadhyay

您的的mouseenter和鼠標離開事件代碼應如下所述。這裏stop()方法用於停止運行動畫。

//Menu 1 
$('#menu1, #submenu1').mouseover(function(){ 
    $('#submenu1').stop().fadeIn(); 
}); 
$('#menu1, #submenu1').mouseleave(function(){ 
    $('#submenu1').stop().fadeOut(); 
}); 

//Menu 2 
$('#menu2, #submenu2').mouseover(function(){ 
    $('#submenu2').stop().fadeIn(); 
}); 
$('#menu2, #submenu2').mouseleave(function(){ 
    $('#submenu2').stop().fadeOut(); 
});

檢查的jsfiddle https://jsfiddle.net/qsyg958b/14/

來源

2016-08-16 11:44:42

它的工作，謝謝！ –

很高興聽到它，請投票也:) –

試試這個

$('#menu1,#submenu1').mouseover(function(){ 
     $('#submenu1').fadeIn(); 
    }); 
    $('#menu1,#submenu1').mouseleave(function(){ 
     $('#submenu1').fadeOut(); 
    });

來源

2016-08-16 11:06:45

不幸的是沒有工作:( –

不能移動光標到鼠標懸停的子菜單

回答

相關問題