奇怪的CSS下拉菜單行爲

請看看這個link。通過懸停在「菜單」上，下拉菜單將顯示，並暫停。現在我嘗試將菜單更改爲TD元素，併爲此TD元素分配圖像，同時將鼠標懸停在此圖像上，它將更改圖像並顯示下拉菜單。請參考下面的代碼：奇怪的CSS下拉菜單行爲

<html> 
<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<style> 
li.li_class{ 
    display: block; 
} 

ul.dropDown{ 
    margin:0px; 
    padding:0px; 
} 
#clickable_div {width:166px; background-color:#9c9c9c;display:block;} 

#nav_menu{width:166px; height:auto; background-color:#CCC;z-index: 99999; display: none;position: absolute;} 

#wrap{ width:166px;} 
</style> 
</head> 

<body> 
    <table> 
     <tr> 
      <td><img src="images/ori_12.png"> 
      </td> 
      <td id='testable'> 
       <div id='wrap'> 
        <img src="images/ori_14.png"> 
        <div id="nav_menu"> 
         <ul class="dropDown"> 
          <li class="li_class"><img src="images/ori_12.png"></li> 
          <li class="li_class"><img src="images/ori_14.png"></li> 
          <li class="li_class"><img src="images/ori_15.png"></li> 
          <li class="li_class"><img src="images/ori_16.png"></li> 
         </ul> 
        </div> 
       </div> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       abc 
      </td> 
      <td> 
       def 
      </td> 
     </tr> 
    </table> 

</body> 
<script> 
     $('#testable img') 
     .mouseenter(function() { 
      this.src = this.src.replace('/ori_', '/hover_'); 
      $('#nav_menu').stop(true, true).slideDown(); 
     }) 
     .mouseleave(function() { 
      this.src = this.src.replace('/hover_', '/ori_'); 
      $('#nav_menu').stop(true, true).slideUp(); 
     }); 



     $('#nav_menu li img') 
     .mouseover(function() { 
      this.src = this.src.replace('/ori_', '/hover_'); 
     }) 
     .mouseout(function() { 
      this.src = this.src.replace('/hover_', '/ori_'); 
     }); 

    </script> 
</html>

當我將鼠標懸停在圖像時，圖像不會被替換和下拉菜單並滑下，但是，我不能在下拉列表項的下拉菜單中徘徊立即滑動。

來源

2013-09-26 Isaac Lem

嘗試，當你將鼠標懸停出圖像的徘徊進入菜單

$('#testable #wrap').mouseenter(function (e) { 
    var anc = $(this).children('img').get(0); 
    anc.src = anc.src.replace('/ori_', '/hover_'); 
    $('#nav_menu').stop(true, true).slideDown(); 
}).mouseleave(function (e) { 
    var anc = $(this).children('img').get(0); 
    anc.src = anc.src.replace('/hover_', '/ori_'); 
    $('#nav_menu').stop(true, true).slideUp(); 
});

Fiddle

鼠標移開時被觸發。因此，在包裝上應用懸停事件。如果此包裝不合適，請創建包裝菜單及其圖像並對其應用懸停效果。

來源

2013-09-26 04:43:44 PSL

再次感謝您的幫助。現在下滑'slideDown'順利，然而，每個'li'元素都沒有懸停改變圖像效果 –

@IsaacLem試試這個http://jsfiddle.net/GRSNX/ – PSL

Bravo！再一次你救了我一天！非常感謝你！ –

奇怪的CSS下拉菜單行爲

回答

相關問題