jQuery，悬停时图像更改[重复]

This question already has an answer here:

这个问题在这里已有答案：

• Change the image source on rollover using jQuery 14 answers
• 使用jQuery 14答案更改翻转时的图像源

Okay, so I have dynamically generated images via PHP, so not necessarily the same images result. And I've spent the last four hours scanning the internet and trying countless things with jQuery and/or CSS, and I've come up with the following that works.

好的，所以我通过PHP动态生成图像，因此不一定会生成相同的图像。我花了最后四个小时扫描互联网并用jQuery和/或CSS尝试无数的东西，我想出了以下有效的东西。

    <a href="build.php?x=1875&y=2020"><img style='background:url(images/tile_4.jpg)' src='images/tile_4.jpg' onmouseover="this.src='images/Market.png'" onmouseout="this.src='images/tile_4.jpg'" /></a>
<a href="build.php?x=1876&y=2020"><img style='background:url(images/tile_4.jpg)' src='images/tile_4.jpg' onmouseover="this.src='images/Market.png'" onmouseout="this.src='images/tile_4.jpg'" /></a>
<a href="build.php?x=1877&y=2020"><img style='background:url(images/tile_4.jpg)' src='images/tile_4.jpg' onmouseover="this.src='images/Market.png'" onmouseout="this.src='images/tile_4.jpg'" /></a>
<a href="build.php?x=1878&y=2020"><img style='background:url(images/tile_4.jpg)' src='images/tile_4.jpg' onmouseover="this.src='images/Market.png'" onmouseout="this.src='images/tile_4.jpg'" /></a>
<a href="build.php?x=1879&y=2020"><img style='background:url(images/tile_4.jpg)' src='images/tile_4.jpg' onmouseover="this.src='images/Market.png'" onmouseout="this.src='images/tile_4.jpg'" /></a>

Market.png has a transparent background.

Market.png具有透明背景。

Now, the above works. On mouseover, it displays Market.png with the transparent background part being tile_4.jpg and out mouseout it is tile_4.jpg.

现在，上面的工作。在鼠标悬停时，它显示Market.png，透明背景部分为tile_4.jpg，鼠标输出为tile_4.jpg。

What I want to know: is there ANY way to accomplish the exact same thing as the above with jQuery or CSS? I haven't figured it out, and I've spent hours trying, but I'd rather do something else if at all possible since the above (with massive repetition, the above format is repeated currently around 100 times, but I have plans to expand it to over a 1000 times) will become a bandwidth hog.

我想知道的是：有没有办法用jQuery或CSS完成与上面完全相同的事情？我还没弄明白，我花了好几个小时尝试，但是如果可能的话，我宁愿做别的事情，因为上面的事情（大量重复，上面的格式目前重复了大约100次，但我有计划将其扩展到超过1000次）将成为带宽生长。

3 个解决方案

#1

You could add a class to each of your <img /> elements, such as 'xyz' (please pick a better name), and then take advantage of the hover() function. Given that your images are dynamic, you could render the image markup with an extra data attribute to serve as the "alternate" or "hover" image source. In the end, you might render something like this:

您可以为每个元素添加一个类，例如'xyz'（请选择一个更好的名称），然后利用hover（）函数。鉴于您的图像是动态的，您可以使用额外的数据属性渲染图像标记，以用作“备用”或“悬停”图像源。最后，你可以渲染这样的东西：

<img class="xyz" data-alt-src="/images/Market.png" src="/images/tile_4.png" />
<img class="xyz" data-alt-src="/images/Something.png" src="/images/tile_5.png" />

And then to apply the switching functionality for each image, you can write a little function that swaps the image src attribute and the data-alt-src attribute on hover-in/hover-out:

然后为每个图像应用切换功能，您可以编写一个小函数，在hover-in / hover-out上交换图像src属性和data-alt-src属性：

var sourceSwap = function () {
    var $this = $(this);
    var newSource = $this.data('alt-src');
    $this.data('alt-src', $this.attr('src'));
    $this.attr('src', newSource);
}

And then it's as simple as executing the function directly using a tiny bit of jQuery event binding:

然后就像使用一点点jQuery事件绑定直接执行函数一样简单：

$(function () {
    $('img.xyz').hover(sourceSwap, sourceSwap);
});

Here's a working example (version 1):

这是一个有效的例子（版本1）：

var sourceSwap = function () {
        var $this = $(this);
        var newSource = $this.data('alt-src');
        $this.data('alt-src', $this.attr('src'));
        $this.attr('src', newSource);
    }

    $(function () {
        $('img.xyz').hover(sourceSwap, sourceSwap);
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img class="xyz" data-alt-src="http://cdn1.iconfinder.com/data/icons/fatcow/32/accept.png" src="http://cdn1.iconfinder.com/data/icons/fatcow/32/cancel.png" />
<br/>
<img class="xyz" data-alt-src="http://cdn1.iconfinder.com/data/icons/fatcow/32/accept.png" src="http://cdn1.iconfinder.com/data/icons/fatcow/32/cancel.png" />
<br/>
<img class="xyz" data-alt-src="http://cdn1.iconfinder.com/data/icons/fatcow/32/accept.png" src="http://cdn1.iconfinder.com/data/icons/fatcow/32/cancel.png" />

Here is a spin on Andres Separ's example from the comments. With this selector, you don't need to decorate your images with a marker class. It will also pre-load the alternate source image to help eliminate any lag or flicker when hovering:

以下是Andres Separ在评论中的一个例子。使用此选择器，您无需使用标记类装饰图像。它还会预先加载备用源图像，以帮助消除悬停时的任何延迟或闪烁：

$(function() {
    $('img[data-alt-src]').each(function() { 
        new Image().src = $(this).data('alt-src'); 
    }).hover(sourceSwap, sourceSwap); 
});

And here's the second version:

这是第二个版本：

var sourceSwap = function () {
        var $this = $(this);
        var newSource = $this.data('alt-src');
        $this.data('alt-src', $this.attr('src'));
        $this.attr('src', newSource);
    }

    $(function() {
        $('img[data-alt-src]').each(function() { 
            new Image().src = $(this).data('alt-src'); 
        }).hover(sourceSwap, sourceSwap); 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img data-alt-src="http://cdn1.iconfinder.com/data/icons/fatcow/32/accept.png" src="http://cdn1.iconfinder.com/data/icons/fatcow/32/cancel.png" />
<br/>
<img data-alt-src="http://cdn1.iconfinder.com/data/icons/fatcow/32/accept.png" src="http://cdn1.iconfinder.com/data/icons/fatcow/32/cancel.png" />
<br/>
<img data-alt-src="http://cdn1.iconfinder.com/data/icons/fatcow/32/accept.png" src="http://cdn1.iconfinder.com/data/icons/fatcow/32/cancel.png" />

#2

jQuery

You could use the mouseover and mouseout events :

您可以使用mouseover和mouseout事件：

$("img").on({
 "mouseover" : function() {
    this.src = 'images/Market.png';
  },
  "mouseout" : function() {
    this.src='images/tile_4.jpg';
  }
});

This way you could take out the attributes onmouseout and onmouseover from you HTML and make your code neat.

通过这种方式，您可以从HTML中取出onmouseout和onmouseover属性，并使代码整洁。

CSS

However, the easiest way is using CSS:

但是，最简单的方法是使用CSS：

img {
  background-image: url('images/tile_4.jpg');
}

img:hover {
  background-image: url('images/Market.png');
}

#3

Sure, with jQuery it is easy.

当然，使用jQuery很容易。

$('img').hover(function(){
    $(this).attr('src','images/Market.png');
},function(){
     $(this).attr('src','images/tile_4.jpg'); 
});