Javascript悬停图像替换

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

谢谢大家!

HTML

---

我会将社交图标作为锚上的

背景图像

（带有

显示：inline block；

）而不是锚内的

元素

然后简单地定义一个

a:hover

状态，将CSS更改为不同的背景。也许甚至可以把它们变成精灵

大概是这样的：

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

---

我会将社交图标作为锚上的

背景图像

（带有

显示：inline block；

）而不是锚内的

元素

然后简单地定义一个

a:hover

状态，将CSS更改为不同的背景。也许甚至可以把它们变成精灵

大概是这样的：

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

---

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

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

---

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

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

---

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

---

使用“CSS sprite”方法可能比加载新图像更好

---

我也遇到了这个难题，所以我想出了自己的方法。超级简单，效果极佳，无需精灵，只需一个透明PNG：

HTML:

CSS:

---

让我知道你的想法。

我也遇到了这个难题，所以想出了我自己的方法。超级简单，效果极佳，无需精灵，只需一个透明PNG：

HTML:

CSS:

---

让我知道你的想法。

如果你将其与背景位置和渐变变换相结合，这将不起作用。在这种情况下，您必须使用img标签afaik。如果您将其与背景位置和渐变变换结合使用，则无法使用。在这种情况下，你必须使用img标签afaik。非常好！我在你的答案中添加了你的JSFIDLE内容。非常好！我将您的JSFIDLE内容添加到您的答案中。

.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 */