Jquery选择器:如何:更改链接悬停时图像标记的src属性

时间:2010-01-06 21:17:39

标签: jquery jquery-selectors

当链接悬停在

上时,我需要更改图像的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>   

当链接未悬停在...时,也将其更改为默认值

5 个答案:

答案 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' />");
                                      }
                                  );

我相信有更好的方法。感谢