Question

＆＃13;

#help {height: 127px; width: 127px}
#help:hover {content: url('LINK'); height: 127px; width: 127px}

＆＃13;

<a href="link"><img src="imagelink" id="help"></a>

＆＃13;

这适用于我，但仅适用于Chrome。它似乎不适用于Firefox，＆＃34; hover＆＃34;图像不会出现。

Answer 1

CSS content属性只能与{em> Pseudo Elements 一起使用，例如::before和::after。

每个MDN：

content CSS属性与 :: before和:: after伪元素一起使用，以在元素中生成内容。使用content属性插入的对象是匿名替换元素。

初始值： 正常

适用于： :: before和:: after pseudo-elements

Source

对于修复，正如Ballu在答案中建议的那样，您可能希望在CSS中将图像设为background-image而不是HTML中的<img>元素。然后，您可以更改background-image上的:hover属性，而不是content属性。

Answer 2

尝试背景而非内容。

#help:hover {background: url('LINK'); height: 127px; width: 127px}

由于

Answer 3

刚刚加入Ballu的答案。这也适用于Firefox。

#help {background: url(http://placekitten.com/127/127);height: 127px; width: 127px; display: inline-block}
#help:hover {background: url('http://lorempixel.com/127/127/')}

<a href="link" id="help"></a>

Answer 4

使用右方法，通过背景图像设置图像并将其状态更改为悬停

图片会在悬停时更改，但不会在Firefox上更改

4 个答案: