奇怪的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下拉菜单行为

回答

相关问题