Blog de Livi » jQuery http://blog.delivi.com Tue, 29 Jun 2010 15:52:41 +0000 en hourly 1 http://wordpress.org/?v=3.0.1-alpha-15359 Hover for non-anchor elements in IE6 http://blog.delivi.com/javascript/hover-for-non-anchor-elements-in-ie6 http://blog.delivi.com/javascript/hover-for-non-anchor-elements-in-ie6#comments Wed, 20 Feb 2008 11:15:00 +0000 livingston http://blog.delivi.info/javascript/hover-for-non-anchor-elements-in-ie6/ Continue reading →]]> 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/.

]]> http://blog.delivi.com/javascript/hover-for-non-anchor-elements-in-ie6/feed 17