Hover for non-anchor elements in IE6

Updated article on Hover for non-anchor elements in IE6

The :hover pseudo-class adds a special style to an element when you mouse over it.

The ‘:hover’ pseudo-class works fine in IE7, FF, Safari and Opera for all the elements. But for obvious reasons IE6 fails to recognize the ‘:hover’ pseudo-class for all elements other than the anchor(<a></a>).

The ‘:hover’ pseudo-class can be made to work in IE6 with the help of the jQuery method ‘hover()’.

Lets see how it is done.

For each element that you want the ‘hover’ to be enabled add a class “hoverable” to it.

Hover Over Me!

In the CSS file define the style for the hovered state with a class “.hovered”.

   #theBox {
       width:200px;
       height:200px;
       background:#F1E592;
       margin:50px auto;
       border:5px solid #540505;
    }
   #theBox.hovered, #theBox:hover {
       width:200px;
       height:200px;
       background:#540505;
       border:margin:50px auto;
       border:5px solid #F1E592;
    }

Now the jQuery part, download the latest release of jQuery.js file from http://docs.jquery.com/Downloading_jQuery and include it in the head of the page as shown below,

<script src="jquery.js" type="text/javascript"></script>

Use the following code in between the ‘<head></head>’ tags in your page to get the hover function in IE6.

 <script type="text/javascript">
$(document).ready(function() {
       $('.hoverable').hover(
          function() {
             $(this).addClass('hovered');     /* On hover add the class 'hovered' and apply the hovered styles */
          }, function() {
             $(this).removeClass('hovered');  /* On mouseout remove the class 'hovered' and reset the styles   */
          }
       );
    });
</script>

This will work in all browsers. I’ve also added the ‘:hover’ pseudo-class to the CSS style so that the modern browsers can display the hover style even when JavaScript is disabled.

View the code in action at http://blog.delivi.com/examples/ie6-hover/.

21 thoughts on “Hover for non-anchor elements in IE6”

  1. Hey Livi, that’s not a really good idea to put initialization into
    If you read carefully what smart people thing about markup and code optimization – you’ll notice that it’s advisable to put all script AT THE end of html… right before
    that will greatly speed up page loading for user

    btw… I’m not really familiar with jQuery (most of my job done with Prototype or mootools).. so is $().ready(function() intended to be run _after_ page has been fully loaded and DOM parsed… or not? :)

  2. Hi Anton, the “$().ready(function()” loads as soon as the DOM is registered by the browser which allows for showing the stuff immediately when the user first sees the page elements.

  3. I will try this now on a project, it’s always IE6 that is a pain in the @$$ ;)

    How does this/your method compare to the other methods of doing :hover on non-links in IE? Is your way better?

  4. This was such an illustrative, relevant answer. It was just what I was searching. I’m truly glad to know I’ll be getting something out of you posts.

  5. @Shaun:

    Depend on the value of usage. If you have alot of different elements needed to be hoverable, the HTC hack is better.

    If you only a few element to be hoverd this method is better, it is simple and it take advantage of Jquery.

  6. can you please help me that how i can add hover effect for div as well as tables, images etc by using this code. please reply me as soon as possible

  7. I like this one
    if ( ($.browser.msie) && ($.browser.version == ’6.0′) ) {
    $(‘.hoverable’).hover(function(){ $(this).toggleClass(‘iehover’); });
    }

  8. Hello,
    Kindly let me know how I can use the above example with a user control in a master page. I tried to add the two scripts in the master page and in a user control but I got this error. Object expected.

    appreciate all your effort.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>