当链接悬停在
上时,我需要更改图像的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>
当链接未悬停在...时,也将其更改为默认值
答案 0 :(得分:8)
你真的应该考虑使用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);
}
答案 1 :(得分:4)
我理解有时候你不能只交换背景位置,所以我也是在寻找基于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>
答案 2 :(得分:1)
这个问题可能有所帮助:img src & jQuery?
答案 3 :(得分:0)
这应该这样做。
$('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');
}
);
答案 4 :(得分:0)
这是我的方法,但它看起来很奇怪,让我成为jQuery的新手
$('.hicon > a').hover(
function(){
$(this).html("<img src='../Assets/images/homeah.png' />");
},
function(){
$(this).html("<img src='../Assets/images/home.png' />");
}
);
我相信有更好的方法。感谢