Странное поведение CSS Dropdown menu

Пожалуйста, взгляните на это link. Находясь над «меню», выпадающее меню будет отображаться, и оно приостанавливается. Теперь я пытаюсь изменить меню на элемент TD и назначить изображение этому элементу TD, а при наведении курсора на это изображение он изменит изображение и отобразит снимок. Пожалуйста, обратитесь к приведенному ниже коду:Странное поведение CSS Dropdown menu

<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>

Когда я наведите курсор мыши на изображение, изображение не будет замещаться и выпадающее меню делает слайд вниз, однако, я просто не мог парить над DROPDOWNLIST элемента в раскрывающемся меню немедленно отодвиньте вверх.

источник

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

MouseOut сработал при наведении из образа, чтобы навести в меню. Поэтому примените события наведения на обертке. Если эта оболочка не подходит, создайте оболочку для обертывания меню и его изображения и примените эффект зависания на нем.

источник

2013-09-26 04:43:44 PSL

Еще раз спасибо за вашу помощь. Теперь сбрасываем 'slideDown' гладко, однако каждый элемент' li' не имеет эффекта изображения изменения наведения –

@IsaacLem Попробуйте это http://jsfiddle.net/GRSNX/ – PSL

Bravo! Еще раз ты спас меня! Огромное спасибо! –

Странное поведение CSS Dropdown menu

ответ

Смежные вопросы