Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    May 2012
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question navigation menu, need help with mouseout function

    I have a navigation menu.
    When you mouseover, there's a sub-menu that appears. It remaining until you mouseout from the submenu or that "top level" item you mousedover in the first place.

    I want to change the mouseout function so it does nothing until you mousover another top-level item in the navigation.

    Example Shown here: http://www.courage.ca

    Code:
    startList = function() {
    if (document.all&&document.getElementById) {
    navRoot = document.getElementById("nav");
    for (i=0; i<navRoot.childNodes.length; i++) {
    node = navRoot.childNodes[i];
    if (node.nodeName=="LI") {
    node.onmouseover=function() {
    this.className+=" over";
      }
      node.onmouseout=function() {
      this.className=this.className.replace
            (" over", "");
       }
       }
      }
     }
    }
    window.onload=startList;

  • #2
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    946
    Thanks
    0
    Thanked 129 Times in 128 Posts
    onmouseover and onmouseout do not see child elements as child element, but as a completely different element.
    So when you enter the child you are technically leaving the parent element, which will trigger the onmouseout.
    Likewise onmouseover triggers when the mouse comes from a child element, or from outside.

    You can use onmouseleave instead
    onmouseleave sees child elements as been a part of the parent, thus it will not trigger when you enter a child.

    onmouseleave's "sibling" is onmouseenter.
    it will trigger if you enter a child or the element it self.

    (entering a child before you enter the element it self, is only relevant if a child is positioned outside the actual borders of it's parent.)

  • Users who have thanked Lerura for this post:

    timbobelmo (05-21-2012)

  • #3
    New to the CF scene
    Join Date
    May 2012
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Is there an easy to change in the code provided I could make? Sorry, I'm not a javascript coder so while I understand what you said, I don't understand how to make the change. Thanks


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •