Javascript悬停图像替换答案

【问题标题】：Javascript hover image replacementJavascript悬停图像替换
【发布时间】：2011-01-13 05:57:16
【问题描述】：

我有一些社交媒体图标，我想在它们悬停时改变颜色。我认为最简单的方法是用新图像替换图像（它们是小的 png 文件）。你有什么建议？一个动态函数是理想的。有四个图标，每个图标的文件名为 demo.png，demo_hover.png。我正在使用 jQuery 库。

谢谢！

HTML

  <a class="a" id="interscope_icon" href="http://www.interscope.com/" alt="Interscope Records" target="_blank"><img class="icon" id="interscope" src="../Images/icons/interscope.png" alt="Interscope Records" /></a>
  <a class="a" href="http://www.twitter.com/FernandoGaribay" alt="Twitter" target="_blank"><img class="icon" id="twitter" src="../Images/icons/twitter.png" alt="Fernando Garibay's Twitter" /></a>
</p>
<p>
  <a class="a" href="http://www.facebook.com/f2inc" alt="Facebook" target="_blank"><img class="icon" id="facebook" src="../Images/icons/facebook.png" alt="Fernando Garibay's Facebook" /></a>
  <a class="a" href="http://www.myspace.com/f2inc" alt="Myspace" target="_blank"><img class="icon" id="myspace" src="../Images/icons/myspace.png" alt="Fernando Garibay's Myspace" /></a>
</p>

jQuery

$('#interscope_icon').hover(function(){
  $('#interscope').attr('src', 'Images/icons/interscope.png');
});

【问题讨论】：

标签： javascript jquery image hover

【解决方案1】：

您可能最好使用“CSS sprite”方法而不是加载新图像...

http://css-tricks.com/css-sprites/

【讨论】：

如果将它与背景位置和渐变变换结合使用，这将不起作用。在这种情况下，您必须使用 img 标签 afaik。

【解决方案2】：

简单的方法是使用 CSS 方式：

#interscope_icon { background-image: url(...) }
#interscope_icon:hover { background-image: url(...) }

【讨论】：

【解决方案3】：

我也遇到了这种困境，所以想出了自己的方法。超级简单，效果很好，不需要精灵，只需要一个透明的 PNG：

HTML：

<div class="facebookicon">
    <a href="#!"><img src="http://example.com/some.png"></a>
</div>

CSS：

.facebookicon img {
    background: #fff;
    transition:  background 400ms ease-out;
}

.facebookicon img:hover {
    background: #3CC;
    transition:  background 400ms ease-in;
}
/* you need to add various browser prefixes to transition */
/* stripped for brevity */

http://jsfiddle.net/mattmagi/MpxBd/

让我知道你的想法。

【讨论】：

非常好！我将您的 jsfiddle 内容添加到您的答案中。

【解决方案4】：

我会将社交图标作为锚点上的background-image（带有display: inline-block;）而不是锚点内的<img />元素。

然后简单地定义一个a:hover 状态，将 CSS 更改为不同的背景。甚至可能是精灵。

类似这样的：

#some_id { background-image: url(...); }
#some_id:hover { background-image: url(...); }

【讨论】：