jQuery，悬停时图像发生更改

jQuery，悬停时图像发生更改

您可以向每个

<img />

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

<img  data-alt-src="/images/Market.png" src="/images/tile_4.png" /><img  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  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" />

这是评论中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" />