Solved

mouse out and mouse over problem in IE

Posted on 2009-04-13
2
385 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
Comment Utility
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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
SSL stands for “Secure Sockets Layer” and an SSL certificate is a critical component to keeping your website safe, secured, and compliant. Any ecommerce website must have an SSL certificate to ensure the safe handling of sensitive information like…
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.
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.

763 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

10 Experts available now in Live!

Get 1:1 Help Now