这是悬停图像最简单的解决方案

Question

我正在为悬停图片寻找一些简单的jquery解决方案。

就像我定义一个类一样。他们jquery应该得到像

这样的当前图像

abc.png然后选择abc_on.png

然后把它放在悬停图像上

我该怎么做。

我不想为每个按钮添加功能。

只需一个功能即可完成。

我的图片通常都是imagename.png或imagename_on.png

Answer 1

$('img.class').hover(function() {
   var obj = $(this); 
   obj.attr('src', obj.attr('src').replace('.png', '_on.png'));
}, function () {
   var obj = $(this); 
   obj.attr('src', obj.attr('src').replace('_on.png', '.png'));
});

我没有机会尝试它，但它应该可以工作，只要.png没有出现在别处的文件名中。

编辑： 使用正则表达式稍微贵一点的解决方案：

var onRe = new RegExp('\\.(.*)$');
var offRe = new RegExp('_on\\.(.*)$');
$('img.class').hover(function() {
   var obj = $(this);
   obj.attr('src', obj.attr('src').replace(onRe, '_on.$1'));
}, function () {
   var obj = $(this);
   obj.attr('src', obj.attr('src').replace(offRe, '.$1'));
});