CODEWITHSUNDEEP
css
marx
marx

Reputation: 13

CSS hover image not working on Firefox but works on Chrome

CSS hover image not working on Firefox but works on Chrome

These are my codes.

.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);
}

Upvotes: 1

Views: 2726

Answers (1)

Stuart Kershaw
Stuart Kershaw

Reputation: 17681

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

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

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

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.

*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.

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

Upvotes: 8

Related Questions