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

Posted

技术标签:

【中文标题】Bootstrap - 在鼠标悬停时更改图标图像[重复]【英文标题】:Bootstrap - Change Icon Image on Mouseover [duplicate] 【发布时间】:2015-10-24 16:21:13 【问题描述】:

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

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

html

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

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

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

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

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

link to the site

【问题讨论】:

你也可以发布你的css吗?? 【参考方案1】:

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

&lt;i class="fa fa-facebook"&gt;&lt;/i&gt;

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

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

Change color when hover a font awesome icon?

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

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

【讨论】:

谢谢,我不知道 font-awesome 的存在,因为我是网页设计/开发的新手。我会调查的。 是的,看看。字体图标解决了各种问题,例如零失真调整大小。

以上是关于Bootstrap - 在鼠标悬停时更改图标图像[重复]的主要内容,如果未能解决你的问题,请参考以下文章

在悬停时更改图像颜色而无需更改图像

在使用 Bootstrap 悬停时使用“位置:绝对”切换或更改图像

JavaScript 在鼠标悬停时更改其他图像

鼠标悬停更改图像位置和大小

鼠标悬停时更改背景图像[重复]

在 div 鼠标悬停时修改图像