经过一些研究，下面的代码应该可以很好地更改图像源，但事实并非如此？
$("#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 的图像将被替换。
最佳答案
您似乎正在尝试更改 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_');
});
关于javascript - JQuery 无法在鼠标悬停/悬停时更改图像 SRC，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18995130/