Your csshover.htc seems a bit complicated. I have a simpler version that
I adapted from Vladdy...demonstrated on a mouseover effect on the images
of this page:
http://www.littleworksstudio.com/CSTC2007.php
The Canadian Scottish Terrier Club 2007 Fundraiser
All you have to do is add the MS proprietary CSS property
behavior: url(IEFixes.htc);
on whatever element that you want to hover, you can restrict it to just
the class subset of elements to the HTC doesn't scan the whole DOM
UL.menu { behavior: url(IEFixes.htc); }
then for whatever your hovered element is add the special .hover class
for IE
UL.menu:hover,
UL.menu.hover { ...}
The file IEFixes.htc:
<public:component>
// For MSIE use JScript to attach JS functions to compensate
// for missing pseudo-class support
// from Vladdy
http://www.vladdy.net/Demos/IEPseudoClassesFix.html
// updated for html4.01 jnl 3/06
<public:attach event="onmouseover" onevent="DoHover()">
<public:attach event="onmouseout" onevent="RestoreHover()">
<public:attach event="onmousedown" onevent="DoActive()">
<public:attach event="onmouseup" onevent="RestoreActive()">
<script type="text/jscript">
function DoHover(){
element.className += ' hover';
}
function DoActive(){
element.className += ' active';
}
function RestoreHover(){
element.className = element.className.replace(/\shover\b/,'');
}
function RestoreActive(){
element.className = element.className.replace(/\sactive\b/,'');
}
</script>
</public:component>
