Posted by Jonathan N. Little on 04/18/07 14:56

Bernhard Sturm wrote:
> Toby A Inkster wrote:
>>
>> ul li:hover
>> {
>> /* Styles go here.
>> * However, there is no way of knowing whether the <a> element
>> * is also being hovered. The cursor might be over the <li> but
>> * not over the <a>. If you want the <a> to fill he entire area
>> * of the <li>, then set it to display:block;height:100%;
>> */
>> }
>
> which will not work in IE6 as IE6 does only understand pseudo-classes
> attached to the a-element. so you need to rely on a JS-function.
> see for example: son of suckerfish
> (http://www.htmldog.com/articles/suckerfish/dropdowns/)

Or take advantage of MSIE's proprietary HTC file... My take on Vladdy's
solution

LI{ behavior: url(IEFixes.htc);
/* more specific */
LI.specialfx{ behavior: url(IEFixes.htc);

##### 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>

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

[Back to original message]