Question

嘿伙计们，对不起我是Jquery的新手。我一直试图用CSS做各种事情，但我正在努力为网站大幅削减我的代码。我正在尝试做的是，当一个div.class img悬停时，它将同时更改2个图像的源文件。我可以做到这一点，但我需要这两个图像有不同的源文件。我也试图保持代码简单，我可以在HTML中设置我的图像源，而不必在脚本中设置每个图像。原因是实际应用程序将有几百张图像。在CSS和脚本中定义翻转状态过于庞大和混乱。

这是我到目前为止所拥有的。

    <script>
    $(function() {
       $(".on img").hover(
            function() {
    $(".on img").attr("src", $(".on img").attr("src").split(".").join("_hover."));
}, 
function() {
    $(".on img").attr("src", $(".on img").attr("src").split("_hover.").join("."));
        });
   });

    </script>

所以我使用DIV类来指定我想要更改的任何图像，或者将要悬停的图像。因此，当该类中的任何其他图像悬停时，任何图像都将具有该翻转状态。

现在的问题是，当该类中的所有图像发生变化时，它们都会变为SAME图像源，我需要将它们更改为自己的图像源。所以x.jpg变成x_hover.jpg而y.jpg变成y_hover.jpg等等。

以下是此示例中的HTML。

    <div class="on"><img src="api.jpg" /> </div>
    <div class="on"><img src="ex.jpg"  /></div>
    <div class="on"><img src="api.jpg" /> </div>
    <div class="on"><img src="ex.jpg"  /></div>

谢谢！任何可以提供帮助的人都会非常感激。我是Jquery的新手，我一直在寻找如何做到这一点的日子。

-JK

Answer 1

我能想到的最简单的方法是更改悬停元素的src：

$('.on img').hover(
    function(){
        var cur = this.src.split('.');
        var extension = cur.pop();
        this.src = cur.join('.') + '_hover.' + extension;
    },
    function(){
        this.src = this.src.replace('_hover','');
    }
);

JS Fiddle demo

<小时/> 已编辑以回答问题，对此答案的评论来自@Jamie：

你知道我怎样才能使这个适用于那个div类中的所有图像，但是每个图像都会改变它自己的图像吗？例如：a.jpg更改为a_hover.jpg，然后返回a.jpg，而b.jpg更改为b_hover.jpg，然后返回b.jpg。如果光标悬停在该div类中的图像上，我希望所有这些图像同时更改。

以下jQuery脚本将为您解决这个问题：

$('.on img').hover(
    function(){
        $('.on img').each(
            function(){
                var cur = this.src.split('.');
                var extension = cur.pop();
                this.src = cur.join('.') + '_hover.' + extension;
            });
    },
    function(){
        $('.on img').each(
            function(){
                this.src = this.src.replace('_hover','');
            });
    }

);

JS Fiddle demo

已编辑以修复上述网址，由于某种原因，该网址是针对图片而非演示版。傻傻的......它现在链接到实际的演示。遗憾。

Answer 2

我正好用正则表达式

$('.on img').hover(function() {
  this.src = this.src.replace(/(.*)(\.[^.]+)$/, '$1_hover$2');
}, function() {
  this.src = this.src.replace(/_hover(\.[^.]+)$/, '$1');
});

小提琴： http://jsfiddle.net/nWc2D/

Answer 3

试试这个：

$(function() {
    $(".on img").hover(
            function() {
                   $(this).attr("src", $(this).attr("src").split(".").join("_hover."));
            } , 
            function() {
                   $(this).attr("src", $(this).attr("src").split("_hover.").join("."));
           });
   });

在这种情况下，$(this)将为您提供悬停的图像，而不是所有具有该类的图像。

帮助多个图像jquery悬停

3 个答案: