jQuery，悬停时图像发生更改

Question

好的，所以我已经通过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具有透明背景。

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

我想知道的是：有什么方法可以使用jQuery或CSS完成与上述完全相同的操作？我还没有弄清楚，我已经花了数小时的时间进行尝试，但是自上次以来，如果可能的话，我宁愿做些其他的事情（通过大量重复，目前上述格式已经重复了约100次，但是我有计划将其扩展到1000倍以上）将成为带宽消耗。

Answer 1

您可以向每个<img />元素添加一个类，例如“
xyz”（请选择一个更好的名称），然后利用hover（）函数。鉴于图像是动态的，您可以使用额外的data属性渲染图像标记，以用作“备用”或“悬停”图像源。最后，您可能会呈现出以下内容：

<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" />

然后要为每个图像应用切换功能，您可以编写一个小函数来交换图像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);
}

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

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

这是一个工作示例（版本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" />

这是评论中Andres Separ的示例的一个变体。使用此选择器，您无需用标记类装饰图像。它还将预加载备用源图像，以帮助消除悬停时的任何滞后或闪烁：

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

这是第二个版本：

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" />