« safeMail : Anti-Spam Email with Unobtrusive Javascript

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.

   <div id="theBox" class="hoverable">
        <h2>Hover Over Me!</h2>
   </div>
 

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">
        /* Script to enable hover function */
       $().ready(function() {
              $('.hoverable').hover(
                   function() {
                       $(this).addClass('hovered');
              }, function() {
                    $(this).removeClass('hovered');
              }
           );
       });
  </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.info/examples/ie6-hover/.

Tags: ,

This entry was posted on Wednesday, February 20th, 2008 at 11:15 am and is filed under Javascript, jQuery. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

4 Responses to “Hover for non-anchor elements in IE6”

  1. Anton Kudris Says:
    February 22nd, 2008 at 8:32 pm

    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. Anton Kudris Says:
    February 22nd, 2008 at 8:33 pm

    oopps… tags have been stripped…
    in original it was “to put initialization into [header] tag” and “… right after [/body]”

  3. livingston Says:
    February 25th, 2008 at 4:22 am

    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.

  4. Shaun Says:
    March 31st, 2008 at 6:02 am

    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?

Leave a Reply