Question

我正在尝试将一串文字附加到src上的图片的mouseover属性，然后在mouseout上删除该字符串。现在我有一半工作：

的Javascript

$('.singleSidebar .subnav img').mouseover(function(){
    $(this).attr('src', function(index, attr) {
    return attr.replace(/\.[^.]*$/, '_anim$&');
    });
});

我在其他地方找到了此代码，所以我不确定如何修改它以删除_anim上的字符串mouseout。

Answer 1

我建议只加载两张图片，然后只显示你想要的图像。这一切都可以用CSS完成。

给一个图像一个＆＃34;动画＆＃34;和另一类＆＃34;非动画＆＃34;。添加此CSS以处理onhover更改：

    .singleSidebar .subnav img.animated,
    .singleSidebar .subnav img.nonanimated:hover
    {
        display: none;
    }
    .singleSidebar .subnav img.animated:hover,
    .singleSidebar .subnav img.nonanimated
    {
        display: block
    }

这会更好用，因为浏览器会立即加载图片，而不是当你将鼠标悬停时，它也会更加清洁IMO

EDIT 啊，如果你需要他们开始玩悬停，那么你需要按照自己的方式去做。尝试这样的事情：

$('.singleSidebar .subnav img').each(function(e){
    var src = $(this).attr('src');
    $(this).hover(function(){
      $(this).attr('src', src.replace('.gif', '_anim.gif'));
    }, function(){
      $(this).attr('src', src);
    });
  });

Answer 2

$(".singleSidebar .subnav img").hover(
  function () {
    $(this).attr('src', function(index, attr) {
      return attr.replace(/\.[^.]*$/, '_anim$&');
    });
  }, 
  function () {
    $(this).attr('src', function(index, attr) {     
        return attr.replace('_anim', ''); // or any other replace
    }); 
  }
);

有关详细信息，请参阅http://api.jquery.com/hover/

Answer 3

http://jsfiddle.net/dZ3c2/1/

var src;
$("img").hover(function() {
     src = $(this).attr("src");
    $(this).attr("src", "replacementsrc");
},function() {
     $(this).attr("src", src);
});

Answer 4

应该可以使用.mouseout并反转替换。

$('.singleSidebar .subnav img').mouseout(function(){     
    $(this).attr('src', function(index, attr) {     
        return attr.replace(/_anim$/, '');     
    }); 
});

jQuery：添加/删除文本字符串到src属性

4 个答案: