Bootstrap - 在鼠标悬停时更改图标图像[重复]

Question

我的页脚中有一些链接到各种社交网络的图标。我希望能够改变它们的颜色，就像将鼠标悬停在它们上面一样，但是到目前为止我所有的尝试都没有成功。

这是我目前的代码，它可以正确显示图像，但当然，鼠标悬停时什么也不做：

HTML

<a target="_blank" href="#"><img src="http://te-al.co.uk/images/icons/f-icon20.png" alt="follow us on Facebook!"></a>

<a target="_blank" href="#a"><img src="http://te-al.co.uk/images/icons/t-icon20.png" alt="follow us on Twitter!"></a>

<a target="_blank" href="#"><img src="http://te-al.co.uk/images/icons/i-icon20.png" alt="follow us on Instagram!"></a>

<a target="_blank" href="#"><img src="http://te-al.co.uk/images/icons/v-icon20.png" alt="follow us on Vimeo!"></a>

我尝试同时使用<img class="f-icon"> 和<div class="f-icon">，同时为.f-icon 和.f-icon:hover 指定width、height 和background-image，但这不起作用；它在比我指定的宽度长的宽度上重复图像。如果我在背景图像中添加 no-repeat，图标就会消失，所以我真的卡住了。

link to the site

Answer 1

您使用 png 文件而不是字体图标是否有原因？你可以使用 font awesome ，然后像这样使用 sn-p ...

<i class="fa fa-facebook"></i>

http://fortawesome.github.io/Font-Awesome/get-started/

然后按照这些说明获得您想要的功能...

Change color when hover a font awesome icon?

这是一个 JSFiddle 可以满足您的需求...

http://jsfiddle.net/5hzv3/6/