Question

当我mouseover .thumb时，我希望src被hello.gif替换，当我mouseout时，我希望src恢复为原始值。第一部分很简单但第二部分我不知道如何“记住”原始的src值。

$('.thumb').mouseover(function() {
    current_src = $(this).attr("src");
    $(this).attr("src", basepath+"_img/hello.gif");
});

$('.thumb').mouseout(function() {
    $(this).attr("src", ???);
});

Answer 1

$('.thumb').mouseover(function() {
    $(this).data('prev_src', $(this).attr('src')).attr("src", basepath+"_img/hello.gif");
});

$('.thumb').mouseout(function() {
    $(this).attr("src", $(this).data('prev_src'));
});

Answer 2

您可以使用jquery的data方法

http://api.jquery.com/jQuery.data/

$('.thumb').mouseover(function() {
    // save the original src here
    $(this).data('src', $(this).attr("src"));
    $(this).attr("src", basepath+"_img/hello.gif");
});

$('.thumb').mouseout(function() {
    $(this).attr("src", $(this).data('src'));
});

http://jsfiddle.net/StGdt/

Answer 3

我为此写了一个小的jQuery插件：

(function( $ ) {
    jQuery.fn.toggleSource = function(img){
        return this.each(function() {
        if(this.tagName.toLowerCase() != 'img') return;
            var $this = $(this);
            var orig = $this.attr('src');
            $this.mouseover(function(){
                $this.attr('src',img);
            });
            $this.mouseout(function(){
                $this.attr('src', orig);
            });
        });
    }
})(jQuery);

你可以这样使用它：

$('.thumb').toggleSource('http://my.site/my.img');

Answer 4

这好多了

$('.hover').mouseover(function() {
    $(this).data('src', $(this).attr("src"));
    $(this).attr("src", $(this).attr("data-hover"));
});

$('.hover').mouseout(function() {
    $(this).attr("src", $(this).data('src'));
});

将数据悬停放在imagen上

<img src="http://placehold.it/300x200" alt="" class="hover" data-hover="http://placehold.it/350x250" />

jquery切换图像src属性

4 个答案: