Jquery 选择器：如何：在链接悬停时更改图像标签的 src 属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2016312/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery selector: How to: change the src attribute of an image tag on link hover
提问by Joberror
I need to change the src attribute of the image when the link is being hover on
当链接悬停时，我需要更改图像的 src 属性
<div class="clear span-33 last" id="navigation">
<div class="hicon span-1"><a href="#" title="Homepage"><img src="../Assets/images/home.png" /></a></div>
</div>
Also change it to default when the link is not hovered on...
当链接未悬停在...上时，也将其更改为默认值...
回答by David Hellsing
You really should look into using CSS sprites for switching backgrounds on hover. But if you need to do this in jQuery, something like this should do it. Just change the over source image to your liking (also preloads the hover image):
您真的应该考虑使用 CSS 精灵在悬停时切换背景。但是如果你需要在 jQuery 中做到这一点，像这样的事情应该做到。只需根据自己的喜好更改源图像（也预加载悬停图像）：
var link = $('a'),
img = link.children('img'),
orig = img.attr('src'),
over = 'over.png',
temp = new Image();
temp.src = over; // preloads
link.hover(function() {
img.attr('src',over);
},function() {
img.attr('src',orig);
}
回答by Lorenzo816
I understand sometimes you can't just swap the background position, so I too was looking for this with a IMG based Navigation (works too just rmbr to load jquery):
我知道有时你不能只是交换背景位置，所以我也在寻找基于 IMG 的导航（工作也只是 rmbr 加载 jquery）：
<script type="text/javascript">
$(document).ready(function(){
$(".navbar li").each(function(){
var link = $(this).children("a");
var image = $(link).children("img");
var imgsrc = $(image).attr("src");
// add mouseover
$(link).mouseover(function(){
var on = imgsrc.replace(/.jpg$/gi,"_over.jpg");
$(image).attr("src",on);
});
// add mouse out
$(link).mouseout(function(){
$(image).attr("src",imgsrc);
});
});
});
</script>
<ul class="navbar"><li><a href="#"><img src="/images/nav_home.jpg" alt="home" /></a></li>
<li><a href="#"><img src="/images/nav_item2.jpg" alt="Item2" /></a></li>
<li><a href="#"><img src="/images/nav_item3.jpg" alt="Item3" /></a></li>
</ul>
回答by Justin Ethier
This question may help: img src & jQuery?
这个问题可能有帮助：img src & jQuery?
回答by defrex
This should do it.
这应该这样做。
$('a[title="Homepage"]').hover(
function () {
// this is the mouseon event
$(this).children('img').attr('src', 'newimage.png');
},
function () {
// this is the mouseout event
$(this).children('img').attr('src', '../Assets/images/home.png');
}
);
回答by Joberror
This is my approach and it works but look too weird and made me a novice of jQuery
这是我的方法，它有效，但看起来太奇怪了，让我成为 jQuery 的新手
$('.hicon > a').hover(
function(){
$(this).html("<img src='../Assets/images/homeah.png' />");
},
function(){
$(this).html("<img src='../Assets/images/home.png' />");
}
);
I believed there is a better approach. Thanks
我相信有更好的方法。谢谢
