Alex Mauzon

As we all know there is a problem for :hover pseudoclass for Microsoft Internet Explorer.
There are many solutions (eg csshover.htc) but all of them have one big and ugly problem: MS IE flickering on mouseout event.

I mean when you move your mouse WITHIN the object but over some child nodes mouse doesn’t leave the HOVERED object but IE thinks it does and onmousout event occurs.

All correct browsers let us use simple :hover pseudoclass for any tag. Except IE. So we should solve the problem for IE only.

So, finally:

Most important word is onmouseleave.

Compatibility: IE5.5 for Windows and later

MSDN:
onmouseenter
onmouseleave.

To save time:

If you prefer to use csshover.htc, just edit it: change (I guess, it is line # 29)
onhover:{on:'onmouseover', off:'onmouseout'},
to
onhover:{on:'onmouseover', off:'onmouseleave'},

If you need more custom fuction for several classes, here is a JS function:

HTML:

<ul id="ourlist">
     <li>
	<p>Item 1</p>
	<a href="#" class="icon_expand">expand</a>
	<a href="#" class="icon_preview">preview</a>
	<a href="#" class="icon_delete">delete</a>
	<a href="#" class="icon_edit">edit</a>
     </li>
     <li>
	<p>Item 2</p>
	<a href="#" class="icon_expand">expand</a>
	<a href="#" class="icon_preview">preview</a>
	<a href="#" class="icon_delete">delete</a>
	<a href="#" class="icon_edit">edit</a>
     </li>
     <li>
	<p>Item 2</p>
	<a href="#" class="icon_expand">expand</a>
	<a href="#" class="icon_preview">preview</a>
	<a href="#" class="icon_delete">delete</a>
	<a href="#" class="icon_edit">edit</a>
      </li>
</ul>

and JavaScript

function init(){
	if(window.event) {
		var liObj=document.getElementById('ourlist').childNodes
		var liQty=liObj.length;
		for (var liIdx=0; liIdx < liQty; liIdx++){
			liObj[liIdx].onmouseover=function(){
				this.className='hover';
			}
			liObj[liIdx].onmouseleave=function(){
				this.className='';
			}
		}
	}
}

There is no flickering problem anymore. No cause to refuse the drink.