圖片上懸停變化，但不會在Firefox

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

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

這對我工作得很好，但僅限於Chrome瀏覽器。似乎它不適用於Firefox，「懸停」圖像不會出現。

來源

2016-12-28 DinoWrecks

您只能使用'僞元素content'，像'::前'和':: after' –

哇！它真的在Chrome中有效！ – Banzay

的CSS屬性content只能用僞元素像::before和::after使用。

每MDN：

的內容 CSS屬性用於與::之前和之後::僞元素以生成式中的元件的內容。使用內容屬性插入的對象是匿名替換的元素。

初始值：正常

適用於：::之前和之後::僞元素

Source

對於修復，作爲巴盧斯在他的答案中使用最大的方法時，您可能希望在HTML中使用CSS中的background-image而不是<img>元素。然後，您可以更改:hover上的background-image屬性，而不是content屬性。

來源

2016-12-28 21:19:23 Santi

感謝它的工作！ – DinoWrecks

試用背景不是內容。

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

感謝

來源

2016-12-28 21:24:01

感謝它的工作！ – DinoWrecks

如果您已經在普通選擇器上定義了寬度和高度，則不需要在懸停選擇器上定義寬度和高度。 –

只是增加了上述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>

來源

2016-12-28 21:45:36 nzkks

感謝它的工作！ – DinoWrecks

-1

使用權梅託德，其設置圖像低谷的背景圖像，並改變他的狀態懸停

來源

2016-12-28 21:49:43 grinmax

圖片上懸停變化，但不會在Firefox

回答

相關問題