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.

 

5 Responses to onmouseout IE flickering problem

  1. Yannick says:

    YOU ARE A GENIUS MAN !!!!
    Ihave been bored for months with IE flickering !!!
    Thnaks to you I discovered ONMOUSELEAVE !

    Thanks again for your great job !

    Yannick

  2. Alex says:

    Not at all 😉

  3. Dan says:

    Cool… just the fix I was looking for… got to love a one word fix.

  4. Piotr says:

    Thanks for this code.
    Great job :))

  5. Sid says:

    This just saved my life… Thank you!!!!