IE6 :hover on non <a> elements via an IE Expresion Tutorial
Here is a working example.
Under normal circumstances, IE6 will only show a :hover effect on an <a> tag, otherwise known as an anchor tag. However, you can feed IE6 an IE expression to simulate a :hover effect for any element you want by using the code below.
IE expressions don't validate, so I like to put them in a seperate ie6.css. Alternativly, you can place them in the <head>, or feed them to IE6 with the * html hack - whatever floats your boat. Here are all three methods to feed specific rules to IE6.
.iehover { /* IE6 hover */
m: expression(this.onmouseover = new Function("this.className = 'iehover-hover';"));
}
.iehover:hover, .iehover-hover { /* IE6 hover */
background: #999;
m: expression(this.onmouseout = new Function("this.className = 'iehover';"));
}
Note: I find that in some situations (not all) you have to give the IE Expression the same exact styling rules as what is in your smart browsers CSS. Otherwise, you get a bad flickering effect to say the least. An example would be, say you give your div a height of 50%. You would then input that same value into the expression as shone below.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<!--[if IE ]>
<style type="text/css">
.iehover { /* IE6 hover */
m: expression(this.onmouseover = new Function("this.className = 'iehover-hover';"));
}
.iehover:hover, .iehover-hover { /* IE6 hover */
background: #999;
position: absolute;
height: 50%;
width: 50%;
left: 25%;
top: 25%;
border: 1px solid #000;
m: expression(this.onmouseout = new Function("this.className = 'iehover';"));
}
</style>
<![endif]-->
<style type="text/css">
body {
background: #CCC;
height: 100%;
}
.iehover {
position: absolute;
height: 50%;
width: 50%;
left: 25%;
top: 25%;
border: 1px solid #000;
background: #EBEBEB;
}
.iehover:hover {
background: #999;
}
</style>
</head>
<body>
<div class="iehover"></div>
</body>
</html>
