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.
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
Not at all 😉
Cool… just the fix I was looking for… got to love a one word fix.
Thanks for this code.
Great job :))
This just saved my life… Thank you!!!!