css - CSS悬停图像不适用于Firefox但适用于Chrome

Question

CSS悬停图像不适用于Firefox但适用于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);
}

score 8 · Accepted Answer

尝试在您的 CSS 中将“内容”更改为“背景图像”。图像路径周围的引号是可选的：

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

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

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

*鉴于下面包含您的 HTML 的评论，我会从源 HTML 中完全删除图像标签，并将您的设置class="angelhack"在锚标签上。然后添加display: block;CSS。

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

1 回答 1