Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

mouse out and mouse over problem in IE

Posted on 2009-04-13
2
Medium Priority
?
396 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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Today, still in the boom of Apple, PC's and products, nearly 50% of the computer users use Windows as graphical operating systems. If you are among those users who love windows, but are grappling to keep the system's hard drive optimized, then you s…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…
This Micro Tutorial will demonstrate how to add subdomains to your content reports. This can be very importing in having a site with multiple subdomains.
Suggested Courses

564 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