Solved

mouse out and mouse over problem in IE

Posted on 2009-04-13
2
387 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
2 Comments
 
LVL 10

Accepted Solution

by:
JPJ78 earned 500 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
IE not alloowing PDF's to open 10 69
JavaScript export function not working in IE 15 31
Animated .jpg? 13 57
Angular - following an example but mine partly works 17 45
If you are a web developer, you would be aware of the <iframe> tag in HTML. The <iframe> stands for inline frame and is used to embed another document within the current HTML document. The embedded document could be even another website.
This article discusses how to create an extensible mechanism for linked drop downs.
This Micro Tutorial will demonstrate how nuggets on the Web are formatted by using Chrome Developer Tools. These tools would not only view the site's CSS but it can also modify it and save the CSS to use on your own site.
Shows how to create a shortcut to site-search Experts Exchange using Google in the Chrome browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch the Search Engine Menu: In chrome, via you…

929 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now