imranul hoque's blog

If you have ever tried to put a hover effect on any input element (submit, button etc) using css you must have faced the problem when you tested on IE6. Generally following is the css code we use to add the hover effect:

input.inputClass{background-color:#cccccc;color:#000000;}
input.inputClass:hover{background-color:#000000;color:#ffffff;}


This would change the background color and text color of any input field of class name “inputClass” on mouse over. So far it was easy. Problem comes in when you try it in IE6 (as always ). The background color or text color does not change when you try this on IE6. So what can we do?

To make this work in IE6 we need to add some javascript and before you ask anything, “No you have no other choice”. First create 2 styles in your css as following:


input.inputClass{background-color:#cccccc;color:#000000;}
input.inputClass-hover{background-color:#000000;color:#ffffff;}


So we have our styles for normal and hover mode. To put them in action use them as following:

<input class="inputClass" onmouseover="this.className='inputClass-hover';" onmouseout="this.className='inputClass'" name="inputName" type="submit" value="Submit" />

That’s it, now your hover effect will work on IE6.