CODEWITHSUNDEEP
htmlcss
DinoWrecks
DinoWrecks

Reputation: 11

Image changes on hover, but not on Firefox

#help {height: 127px; width: 127px}
#help:hover {content: url('LINK'); height: 127px; width: 127px}
<a href="link"><img src="imagelink" id="help"></a>

This works fine for me, but only on Chrome. Doesn't seem like it works on Firefox, the "hover" image doesn't appear.

Upvotes: 1

Views: 420

Answers (4)

grinmax
grinmax

Reputation: 1855

Use right metod, it set image trough background-image and change him state for hover

Upvotes: -1

nzkks
nzkks

Reputation: 116

Just adding to Ballu's answer above. This works in Firefox too.

#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>

Upvotes: 1

Tyler Roper
Tyler Roper

Reputation: 21672

The CSS content attribute can only be used with Pseudo Elements like ::before and ::after.

Per MDN:

The content CSS property is used with the ::before and ::after pseudo-elements to generate content in an element. Objects inserted using the content property are anonymous replaced elements.

Initial value: normal

Applies to: ::before and ::after pseudo-elements

Source

For a fix, as Ballu suggests in his answer, you may want to make the image a background-image in CSS instead of an <img> element in the HTML. You can then change the background-image attribute on :hover instead of the content attribute.

Upvotes: 3

Ballu Mehra
Ballu Mehra

Reputation: 9

Try with background not content.

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

Thanks

Upvotes: 1

Related Questions