JQuery не удалось изменить изображение SRC onmouseover/hover

После некоторых исследований приведенный ниже код должен отлично работать, чтобы изменить источник изображения, но это не так?JQuery не удалось изменить изображение SRC onmouseover/hover

$("#li_1").mouseover(function() { 
      $(this).attr("src", "images/hover_12.png"); 
     }, function() { 
      $(this).attr("src", "images/ori_12.png"); 
     });

HTML код:

<html> 
<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <link rel="stylesheet" type="text/css" href="demo.css"> 
<style> 
li{ 
    display: block; 
} 
</style> 
</head> 

<body> 
    <div id='wrap'> 
     <div id="clickable_div">MENU</div> 
      <div id="nav_menu"> 
       <ul class="dropDown"> 
        <li id="li_1"><img src="images/ori_12.png"></li> 
        <li id="li_2"><img src="images/ori_14.png"></li> 
        <li id="li_3"><img src="images/ori_15.png"></li> 
        <li id="li_4"><img src="images/ori_16.png"></li> 
       </ul> 
      </div> 
     </div> 
    </div> 

</body> 
<script> 
     $("#li_1").mouseover(function() { 
      $(this).attr("src", "images/hover_12.png"); 
     }, function() { 
      $(this).attr("src", "images/ori_12.png"); 
     }); 

     $('#wrap').mouseover(function(){ 
      $('#nav_menu').slideDown(); 
     }); 
     $('#wrap').mouseleave(function(){ 
      $('#nav_menu').slideUp(); 
     }); 

    </script> 
</html>

DEMO.CSS:

#clickable_div {width:166px; background-color:#9c9c9c;} 
*{margin:0; padding:0} 
#nav_menu{width:166px; height:auto; background-color:#CCC;display:none;} 

#wrap{ width:166px }

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

источник

2013-09-25 Isaac Lem

Вы пытаетесь, чтобы добавить src к элементу LI, а не к элементу IMG.
Вам также понадобится событие mouseout, чтобы изменить изображение src в нормальном режиме.

Попробуйте это:

$("#li_1 img") 
    .mouseover(function() { 
     $(this).attr("src", "images/hover_12.png"); 
    }) 
    .mouseout(function() { 
     $(this).attr("src", "images/ori_12.png"); 
    });

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

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

источник

2013-09-25 02:23:29

wow !! Большое спасибо за то, что вы обновили! –

Добро пожаловать :) Рад, что я мог бы помочь. –

JQuery не удалось изменить изображение SRC onmouseover/hover

ответ

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