IE Image hover effect problem

[bruceb444]

Hi Guys,

I am kind of new to CSS and did this bit to get hover effect working in Chrome but it doesn't work for IE and may other browsers. Is there a standard way to do this? It is a menu for a site:

CSS Code:

menu_voipstore:before{ 
content: url("images/voipstore.png"); 
} 
menu_voipstore:hover:before{ 
content: url("images/voipstoreafter.png"); 

#menu_holder { 
height: 150px; 
width: 766px; 
margin: auto; 
} 

HTML Code:

<div id="menu_holder"> 
<menu_voipstore></menu_voipstore> 
</div> 

However, as you may know, this doesn't work with IE. I have explored a few posts about javascript what or not but they don't seem to have examples with using images. Can someone please guide me to a better method for using mouse-over effect with images? be it using just html or combo of html and css.

Much appreciated.

[soulsizzle]

I hope this helps, as I'm not exactly 100% sure what you're describing is supposed to look like.

Due to browser support, I tend to stay away from using the :before and :after pseudo-elements. This is also why I would stay away from using custom HTML elements like 'menu_voipstore'. That aside, assuming I understand you correctly, I would try something along the lines of:

menu_voipstore {
padding-left: 20px; /* width of voipstore + little extra to preference */
background: transparent url(images/voipstore.png) left center;
}
menu_voipstore:hover{
background: transparent url(images/voipstoreafter.png) left center;
}

#menu_holder {
height: 150px;
width: 766px;
margin: auto;
} 

[bruceb444]

That doesn't work. Your method or my method work for any browser but Internet Explorer from Microsoft. Do you have a work-around for Internet Explorer for Hover effect?

I think one has to use JavaScript of some sort?

Thanks for the input

[hbmehta]

IE accepts hover only for <a href>. There are some work arounds. Try google search for IE fix of .htc file. Someone created a cross browser solution(java script) for this one.

I cant think of any css solution just for IE.