I’ve been adding css hover techniques to items a lot and I got tired of doing onmouseover’s in javascript to get the hover effect to work in IE. I ran across a script called whatever.hover which makes it easy with CSS. Just add this script to the header and then define your css hover as shown bolded below. If anyone has any questions or needs help with implementing it, let me know.
Put this in the Header
<!– Additional IE/Win specific style sheet (Conditional Comments) –>
<!–[if IE]><style type=”text/css” media=”projection, screen”>
.classname{
behavior: expression(
this.onmouseover = new Function(”this.className += ‘ classnamehover’;”),
this.onmouseout = new Function(”this.className = this.className.replace(’ classnamehover’, ”);”),
this.style.behavior = null
);
}
/*.classname{
background-color: expression(
!this.js ? (this.js = 1,
this.onmouseover = new Function(”this.className += ‘classnamehover’;”),
this.onmouseout = new Function(”this.className = this.className.replace(’ classnamehover’, ”);”)
) : false);
);
}*/
/*.classname{background-color: expression(
this.onmouseover = new Function(”this.className += ‘ classnamehover’;”),
this.onmouseout = new Function(”this.className = this.className.replace(’classnamehover’, ”);”)
);
}*/
</style><![endif]–>
Put this in the css
.classname{
font-family: Verdana,Helvetica,Sans-Serif;
font-size: xx-small;
font-weight: bold;
padding: 5;
background: silver;
cursor: hand;
}
.classname:hover, .classnamehover {
color: HighlightText;
background: Highlight;
}
HTML
<input type=”button” value=”Submit” class=”classname” style=”width=100″ />