CSS悬停图片无法在Firefox上使用，但适用于Chrome [英] CSS hover image not working on Firefox but works on Chrome

问题描述

CSS悬停图片无法在Firefox上使用，但适用于Chrome

CSS hover image not working on Firefox but works on Chrome

这些是我的代码。

.col-md-2 .angelhack {
height: 65px;
width: 188px;
content: url(../img2/logo_angelhack.png);

}

.col-md-2 .angelhack:hover {
    height: 65px;
    width: 188px;
    content: url(../img2/logo_angelhack_colored.png);
}

推荐答案

'background-image'在你的CSS。图片路径周围的引用是可选的：

Try changing 'content' to 'background-image' in your CSS. Quotes around the image path are optional:

background-image: url(../img2/logo_angelhack.png);

我在此添加了一个示例： http://jsfiddle.net/dKcdK/

I've added an example here: http://jsfiddle.net/dKcdK/

请注意，该示例假设 .angelhack 是一个块级元素。如果不是这样，那么您还需要在CSS中应用 display：block;

Note that the example assumes that .angelhack is a block level element. If that's not the case, then you'll need to also apply display: block; in your CSS.

*考虑到下面包含HTML的注释，我将从源HTML中删除图像标签，并在锚标签上设置 class =angelhack。然后在CSS中添加 display：block;

*Given the comments below containing your HTML, I would remove the image tag from the source HTML entirely, and set your class="angelhack" on the anchor tag. Then add display: block; in the CSS.

更新jsFiddle这里： http://jsfiddle.net/dKcdK/2/

Updated jsFiddle here: http://jsfiddle.net/dKcdK/2/

这篇关于CSS悬停图片无法在Firefox上使用，但适用于Chrome的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！