On Hover(content css tag) is not working in Firefox and IE

Question

I have used content tag in css for the on hover function as I have given an id to the image tag.But, the on Hover is not working in Firefox and IE and it's working fine in chrome. Here is the link to this : thunderstorm999.byethost9.com

#explore:hover {
    content: url('images/explore-hover.png');
}
#material:hover {
    content: url('images/material-hover.png');
}
#team:hover {
    content: url('images/team-hover.png');
}
#contact:hover {
    content: url('images/contact-hover.png');
}
#merchandise:hover {
    content: url('images/merchandise-hover.png');
}

<ul class="navigation">
<li><a href="#"><img id="explore" src="images\explore.png"/></a></li>
<li><a href="#"><img id="material" src="images\material.png"/></a></li>
<li><a href="#"><img id="team" src="images\team.png"/></a></li>
<li><a href="#"><img id="contact" src="images\contact.png"/></a></li>
<li><a href="#"><img id="merchandise" src="images\merchandise.png"/></a></li>
</ul>

`img` can't have content. So behavior of Firefox and IE is correct. Use content of `a` tag instead and set image as background. — dfsq, Feb 15 '15 at 09:08
Didn't get you. Can you please give an example using the above code? — user1538020, Feb 15 '15 at 09:12

Ram Tobolski · Answer 1 · 2015-02-15T10:30:36.790

1

According to mozilla and w3c the css content property is supposed to work only in conjunction with the :before and :after pseudo-elements. So it's better not to use it in the present case. You can do it instead like this.

<li id="explore">&nbsp</li>

#explore {
background: url('http://thunderstorm999.byethost9.com/images/explore.png') center no-repeat;
}

#explore:hover {
background: url('http://thunderstorm999.byethost9.com/images/explore-hover.png') center no-repeat;
}

edited Feb 15 '15 at 10:30

answered Feb 15 '15 at 09:28

Ram Tobolski

346
1
9

I checked the above fiddle but then I need to click on the menu, so they must be links. When I insert an tag then the menu icons change only partially to links instead being able to click on the whole image as links. Any other solution or defined solution? – user1538020 Feb 15 '15 at 12:14
Also currently, when we clear the cache and then check on chrome and if we initially hover on the menu icons then there seems to be a flicker in those icons. Why is it that so ? – user1538020 Feb 15 '15 at 12:24
@user You can use the li elements themselves as links. See http://jsfiddle.net/gqhxt58j/6/. As to the other issue, I am not near a computer right now (I am editing in my phone). I will look at it later. Please notify if it works. – Ram Tobolski Feb 15 '15 at 13:07
1

I did check but then the whole li block is taken as a Link. So if I hover on the side of the image , then too the click proceeds. I overcame this using : onmouseover="this.src='./images/merchandise-hover.png'" onmouseout="this.src='./images/merchandise.png'" Thanks for the help :) I have another issue regarding the Font Face -> Custom Font Face for the footer. In IE, the Custom font face is not rendered -> Here's the post : http://stackoverflow.com/questions/28517666/custom-font-is-not-displaying-in-ie Help me with this. Thanks – user1538020 Feb 15 '15 at 13:18

On Hover(content css tag) is not working in Firefox and IE

1 Answers1