mekusharim_ltd
asked on
mouse out and mouse over problem in IE
hello,
i have a navigation using the tag UL and i want the item in the list to change class on mouse over and go back to the original class on mouseout, the problem is when i'm using IE and the mouse is over an inline element like A or IMG tags inside the LI then the browser calls to mouseout event.
in the Code section u can see the HTML and the JS code.(using Prototype Framework)
i have a navigation using the tag UL and i want the item in the list to change class on mouse over and go back to the original class on mouseout, the problem is when i'm using IE and the mouse is over an inline element like A or IMG tags inside the LI then the browser calls to mouseout event.
in the Code section u can see the HTML and the JS code.(using Prototype Framework)
<ul id="navigation-right" class="clearfix">
<li class="not-selected"><img id="Img1" src="../images/new_design/general/Icon_Add.gif" alt="poll" /><a href="PollAdd.aspx" class="Blue" onclick="return loginState();">add poll</a></li>
<li class="not-selected"><img id="Img3" src="../images/new_design/navigation_icons/Icon_Survey.gif" alt="poll" /><asp:HyperLink ID="hylMyArticles" runat="Server" CssClass="Blue" onclick="return loginState();">view pollsÙ</asp:HyperLink></li>
</ul>
~~~~
var navigationHandler = {
addMouseEvents : function(ul){
var arrLi = $(ul).childElements();
for(var i=0;i<arrLi.length;i++){
navigationHandler.addEvents(arrLi[i],'mouseover','selected');
navigationHandler.addEvents(arrLi[i],'mouseout','not-selected');
}
},addEvents : function(obj,eventType,cssClass){
Element.observe(obj,eventType,function(){
var elm = navigationHandler.getElement.apply(this);
elm.className = cssClass;
});
},getElement : function(){
var elm = null;
if(document.all){
var e = window.event;
elm = e.srcElement;
if(e.type.toLowerCase() == 'mouseout'){
if(((e.toElement.tagName.toLowerCase() == 'img') || (e.toElement.tagName.toLowerCase() == 'a')) && (e.fromElement.tagName != 'li' )){
return false;
}
}
}else {elm = this}
return elm ;
}
}
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.