Question

当链接悬停在

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

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

Answer 1

你真的应该考虑使用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);
}

Answer 2

我理解有时候你不能只交换背景位置，所以我也是在寻找基于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>

Answer 3

这个问题可能有所帮助：img src & jQuery?

Answer 4

这应该这样做。

$('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');
    }
);

Answer 5

这是我的方法，但它看起来很奇怪，让我成为jQuery的新手

                $('.hicon > a').hover(
                                  function(){
                                      $(this).html("<img src='../Assets/images/homeah.png' />");
                                      },
                                  function(){
                                      $(this).html("<img src='../Assets/images/home.png' />");
                                      }
                                  );

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

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

5 个答案: