CSS image hover doesn't work on Interner Explorer and Firefox

Question

I would like to solve this problem only using CSS and HTML for the moment, as I don't know JavaScript or jQuery yet.

So I have this hyperlink-image that changes (it glows) when I hover on it in Chrome, but it doesn't work in Internet Explorer and Firefox. (Internet Explorer version:11, Firefox version: 26.0)

I read that Internet Explorer recognizes only "anchors", but I don't have any clue how to put the hover in the <a> tab, as the CSS page is separated from the HTML one. I also tried to do write a#x{...}, but it doesn't work.

HTML:

<a href="http://www.google.com">
   <img id="x" style="position:absolute; top:300px; left:950px;" 
    src="images/x.png"/>
</a>

CSS:

#x{
    width:188px;
    height:253px;
}

#x:hover{
    content: url(images/xhover.png);
    width:188px;
    height:253px;
}

I tried to change content to background-image, but the result is that the hover image is in the original size and its height and width won't be modified, and it stays on the background, so the first image won't overlap it... I tried to check other posts, but I couldn't find the right solution for me...

http://stackoverflow.com/questions/18813299/changing-image-on-hover-with-css-html — Black Sheep, Jan 13 '14 at 11:52

score 1 · Answer 1 · answered Jan 13 '14 at 11:53

1

Change

content:url(images/xhover.png);

to

background:url(images/xhover.png);

DEMO here.

answered Jan 13 '14 at 11:53

codingrose

15,563
11
39
58

I see that this works on IE as well, but now the hover image changes size and it stays on the background, therefore the result is quite ugly... I can't fix it with width and height in the CSS file! – Titania Jan 13 '14 at 13:13

score 1 · Answer 2 · edited Jan 16 '14 at 06:45

1

Try:

<a href="http://www.google.com" class="link">
    <img class="imgHover" src="http://lorempixel.com/400/200/" alt="image">
    <img class="imgHover" src="http://lorempixel.com/400/200/nature/1" alt="image">
</a>


<style type="text/css" media="screen">
    .imgHover:first-child{
        display: none
    }

    .link:hover .imgHover:first-child{
        display: block;
    }

    .link:hover .imgHover:last-child{
        display: none;
    }
</style>

The correct way is to use the background, but if you need to use the tag <img> this can be a good solution.

edited Jan 16 '14 at 06:45

Peter Mortensen

30,738
21
105
131

answered Jan 13 '14 at 12:11

Sergio Andrade

194
1
1
10

1

Best answer. Thanks! – ahtartam Aug 02 '16 at 22:43

CSS image hover doesn't work on Interner Explorer and Firefox

2 Answers2