您可以为每个类添加一个类<img />
元素,例如“xyz”(请选择一个更好的名称),然后利用hover() http://api.jquery.com/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
悬停入/悬停出的属性:
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" />
这是一个旋转安德烈斯·塞帕尔 https://stackoverflow.com/users/2675264/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" />