I had a beautifully crafted site (Serendeputy, in case you were wondering) that worked in all the browsers. Then, I noticed that in Internet Explorer 7, the mouseover and mouseout actions weren’t working correctly. Specifically, the mouseover event would fire correctly, adding a hover class that exposed additional information; unfortunately, the mouseout action was way too eager: it would fire when the mouse left any text, not when it left the div.

The users couldn’t access the items the hover class exposed. As soon as they went to click on them, the items disappeared. It is not nice to cruelly taunt your users.

Anyway, Google let me down, and I couldn’t find any good workarounds. So, this is what I did.

I ended up using a different class for IE, despite the icky duplication it caused in the stylesheet. This is what the original beautifully-simple jQuery code looked like:


$("div.story").mouseover(function(e) {
  $(this).addClass("hover");
});

$("div.story").mouseout(function(e) {
  $(this).removeClass("hover");
});


This code worked in every browser but IE7. Here’s what I did for IE7:


$("div.iestory").mouseover(function(e) {
  $(".iestory").removeClass("hover");
  $(this).addClass("hover");
});


So, this removes the class from all possible divs as you enter a new one. It then lights up the hover for the current div. This is hitting a fly with a sledgehammer, but it was the simplest thing I could think of that would possibly work. You don’t really notice the speed hit unless you have tons of these possible divs on the page.

If there’s a better way to do this, please leave it in the comments. If not, then I hope you find this useful.

This entry was posted on Tuesday, June 30th, 2009 at 1:45 pm and is filed under Programming. 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.