Picnic Website Code Tutorials

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>
		

Need help adding this or other code to your website? Post it here in the forum! Forum

Sponsors

Top Donators

Friends of Mine