Problems with <IE7, Adding Classes, and Hover Event
Posted: Thu Nov 06, 2008 10:52 pm
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):
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:
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.
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>
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
});
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.