Hover effect on input element in IE6


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.

, , , ,

  1. #1 by Richard on April 27, 2010 - 3:36 am

    Hi

    Was reading your soundex function but got distracted by this. Of course jQuery makes it even easier.

    $(“input.inputClass”).hover(function(){
    this.addClass(“.inputClass-hover”)
    },function(){
    this.removeClass(“.inputClass-hover”)
    })

  2. #2 by Imran on April 27, 2010 - 6:41 am

    Hi Richard,

    Don’t you think including the whole jQuery for this would be too much? And JQuery does the same thing anyway.
    Thanks for sharing and keep coming.

  3. #3 by Parsa on June 12, 2011 - 8:01 pm

    Thx alot,that works great on IE6 , IE7 , IE8

  4. #4 by Tianung on March 19, 2015 - 4:56 pm

    Works beautifully in IE8. Solved a problem that has been plaguing me for hours. Many thanks.

Comments are closed.