好吧，我已经通过 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 倍以上)将成为带宽大户。
您可以为每个 <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" />
然后为每个图像应用切换功能，您可以编写一个交换图像的小函数 src属性和 data-alt-src hover-in/hover-out 属性:
var sourceSwap = function () {
var $this = $(this);
var newSource = $this.data('alt-src');
$this.data('alt-src', $this.attr('src'));
$this.attr('src', newSource);
}
然后它就像直接使用一点点 jQuery 事件绑定(bind)来执行函数一样简单:
$(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" />