jQuery，悬停时更改图像

jQuery, image changing on hover

提问by Witold Kowelski

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 倍以上）将成为带宽大户。

回答by C???

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:

您可以为每个<img />元素添加一个类，例如“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 srcattribute and the data-alt-srcattribute on 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" />

回答by krishgopinath

jQuery

jQuery

You could use the mouseoverand mouseoutevents :

您可以使用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 onmouseoutand onmouseoverfrom you HTML and make your code neat.

这样，您就可以取出的属性onmouseout，并onmouseover从你的HTML和使你的代码整洁。

CSS

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');
}

回答by Zevi Sternlicht

Sure, with jQuery it is easy.

当然，使用 jQuery 很容易。

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