JQuery 无法在鼠标悬停/悬停时更改图像 SRC
JQuery failed to change image SRC onmouseover/hover
经过一些研究,下面的代码应该可以正常工作,可以更改图像源,但事实并非如此?
$("#li_1").mouseover(function () {
$(this).attr("src", "images/hover_12.png");
}, function () {
$(this).attr("src", "images/ori_12.png");
});
网页代码:
<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>
演示。.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_');
});
相关文章:
- jQuery:当屏幕大小改变时,如何更改默认图像和悬停图像
- 在悬停图像上播放声音,悬停在图像上时停止
- JS用于鼠标悬停图像上传按钮(如Facebook)
- 带有悬停图像的子导航栏
- javascript悬停图像并从左上到右下显示
- 悬停图像链接,更改文本css
- Jquery:图像获胜'点击后不会改变,而是停留在悬停图像上.
- 如何在悬停图像时显示不同的滑块箭头
- 鼠标悬停图像干扰
- 如何在悬停图像时显示某些信息,并在单击图像时显示某些内容
- 悬停图像时是否可以隐藏标题
- j查询悬停图像效果
- JavaScript 鼠标悬停图像交换问题
- 使用 jQuery 预览图像,更改悬停图像大小
- 滑动切换 单击或悬停图像时显示段落
- 如何将悬停图像与 Twitter 引导下拉菜单一起使用
- 如何悬停图像显示迷你画廊
- 鼠标悬停图像地图上的工具提示
- Javascript.悬停图像,将其移动到显示图像的右侧
- Javascript鼠标悬停图像