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

您似乎试图更改LI元素的src元素，而不是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

哇！非常感谢您更新的内容！ –

不客气:)很高兴能帮到你。 –

JQuery未能改变图像SRC onmouseover/hover

回答

相关问题