Problems with <IE7, Adding Classes, and Hover Event

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
jack_indigo
Forum Contributor
Posts: 186
Joined: Sun Jun 08, 2008 11:25 pm

Problems with <IE7, Adding Classes, and Hover Event

Post by jack_indigo »

Just want to let you all know -- no, you're not crazy -- if you ever run up against this.

Evidently with IE6 and prior IE browsers, if you add a class at runtime to an element, and then expect that the CSS hover event for that element will just engage, you'd be wrong. No, it won't. It will in IE7, all FF, all Opera, and all Safari. But not IE6 and prior IE browsers.

For instance (and I assume you have loaded jQuery):

Code: Select all

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
</head>
<body>
<style>
.test:hover {
 background-color: red;
}
</style>
 
<div id="tester">
My test
</div>
 
<script>
$().ready(function(){ //when page has fully loaded
 $('#tester').addClass('test');
});
</script>
</body>
</html>
 
Run the above page in all browsers you have. You'll see on IE6 and previous IE browsers that when you hover over 'My test', the background does not change to red. But it does in all other browsers.

For the fix, you have to do something like:

Code: Select all

 
$().ready(function(){ //when page has fully loaded
 $('#tester').addClass('test');
 
  // START OF <IE7 PATCH
  $('#tester').hover( function() { //mouse in
    if ($.browser.msie && (parseInt(jQuery.browser.version) < 7)) { //if ie6 or less
      if ($(this).hasClass('test')) {
        $(this).css('background-color','red');
      }
    }
  }, function() { //mouse out
    if ($.browser.msie && (parseInt(jQuery.browser.version) < 7)) { 
      if ($(this).hasClass('test')) {
        $(this).css('background-color','#FFF');
      }     
    }
 }); 
 // END PATCH
});
 
In a nutshell, the patch checks for a hover event on #tester. It then sees if the browser is IE and less than 7. It then sees if the item being hovered has a class of 'test' in it. If so and a hover event, it sets background to red. If so and a blur event (mouse out), it sets background back to normal again.

It's no wonder 37Signals decided to abandon IE6 support for their website. If one has to keep doing this cluter-eff on all the jQuery they do, among other hacks for IE6 and prior IE browsers, it's a miracle they can get any work done for their website.

Anyway, if one has a more elegant hack, such as adding an event at runtime rather than trapping it, then I'd love to see it.
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Re: Problems with <IE7, Adding Classes, and Hover Event

Post by kaszu »

It's because in IE6 only <a> elements support :hover pseudo-class. Class doesn't event have to be assigned at the runtime.
If you try

Code: Select all

div:hover { background: red; }
then it just won't work without a 'hack'.

I have been using csshover.htc for ages. Advantage over your solution is that it's included through CSS behaviour (doesn't require any javascript, but CSS doesn't validate anymore) and works for all elements with :hover pseudo class.

I wish I could abandon IE6, that would make my life a lot nicer :roll:
Post Reply