Improve company productivity with a Business Account.Sign Up

x
?
Solved

mouse out and mouse over problem in IE

Posted on 2009-04-13
2
Medium Priority
?
398 Views
Last Modified: 2013-12-08
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)
<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 ;
            }
        }

Open in new window

0
Comment
Question by:mekusharim_ltd
1 Comment
 
LVL 10

Accepted Solution

by:
JPJ78 earned 2000 total points
ID: 24128862
Have a look at this.

http://blog.stchur.com/2007/03/15/mouseenter-and-mouseleave-events-for-firefox-and-other-non-ie-browsers/

The trick is to use:
relatedTarget, fromElement, toElement
to see if element that raises the event is a child of the element who already has risen the event.
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

This article discusses how to create an extensible mechanism for linked drop downs.
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Google currently has a new report that is in beta and coming soon to Webmaster Tool accounts. This Micro Tutorial will highlight new features for Google Webmaster Tools.

606 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question