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.