jQuery mouseleave issues

Question

New to JQuery. I'm trying to make a menu where the links appear in a div that's in the same position when one of the categories in the menu is hovered over. I want the menu to stay open and disappear when the mouse leaves the menu. The problem I'm having is that every time "projects" is hovered over, none of the other menu categories open. I think this has something to do with "mouseleave" but I can't figure out the fix.

HTML:

<nav>
        <ul>
            <li class="menuItem">
                <a id="press" href="#">Press</a>
            </li>
            <li class="menuItem">
                <a id="projects" href="#">Projects</a>
            </li>
            <li class="menuItem">
                <a id="contact" href="#">Contact</a>
            </li>
        </ul>
        <div class="wing" id="pressWing">
            <ul>
                <li><a href="">Link 1</a></li>
                <li><a href="">Link 2</a></li>
            </ul>
        </div>
        <div class="wing" id="contactWing">
            <ul>
                <li><a href="">Contact 1</a></li>
                <li><a href="">Contact 2</a></li>
            </ul>
        </div>
        <div class="wing" id="projectsWing">
            <ul>
                <li><a href="">Project 1</a></li>
                <li><a href="">Project 2</a></li>
            </ul>
        </div>
    </nav>

jQuery:

$(function() {
    $('#contact').hover(function() {
        $('#contactWing').show();
    });
    $('#contactWing').mouseleave(function() {
        $('#contactWing').hide();
    })
    $('#projects').hover(function() {
        $('#projectsWing').show();
    });
    $('#projectsWing').mouseleave(function() {
        $('#projectsWing').hide();
    })
    $('#press').hover(function() {
        $('#pressWing').show();
    });
    $('#pressWing').mouseleave(function() {
        $('#pressWing').hide();
    })
});

Here is the fiddle: https://codepen.io/maris170/pen/pogEXap

Couldn't figure out how to do that and have the menu be positioned in the same place — sophiamarinara
– sophiamarinara, Commented Jun 16, 2020 at 19:31

epascarello · Accepted Answer · 2020-06-16 19:48:59Z

0

I am not sure 100% sure what exactly you are looking for, but the basic idea with CSS is using hover and nesting to show and hide its children UL

nav ul,
nav li {
  margin: 0px;
  padding: 0px;
  list-style-type: none;
}

/* FIRST LEVEL */

nav > ul > li {
  float: left;
}

nav > ul > li > a {
  padding: 0 2em;
}

nav > ul > li:hover > a {
  background-color: #CCCCCC;
}

/* DROP DOWN */

nav > ul > li > ul {
  display: none;
  position: absolute;
  left:0; /* remove this if you want it under the hovered option */
  width: 20em;
  background-color: #EDD;
}

nav > ul > li:hover ul {
  display: block;
  min-height: 20em;
}

nav > ul > li > ul a {
  display: block;
  padding: .2em;
}

nav > ul > li > ul a:hover {
  background-color: #EAA;
}

<nav>
  <ul>
    <li class="menuItem">
      <a id="press" href="#">Press</a>
      <ul>
        <li><a href="">Link 1</a></li>
        <li><a href="">Link 2</a></li>
      </ul>

    </li>
    <li class="menuItem">
      <a id="projects" href="#">Projects</a>
      <ul>
        <li><a href="">Project 1</a></li>
        <li><a href="">Project 2</a></li>
      </ul>
    </li>
    <li class="menuItem">
      <a id="contact" href="#">Contact</a>
      <ul>
        <li><a href="">Contact 1</a></li>
        <li><a href="">Contact 2</a></li>
      </ul>
    </li>
  </ul>

</nav>

answered Jun 16, 2020 at 19:48

epascarello

208k20 gold badges206 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

sophiamarinara Over a year ago

Interesting...it works fine in codepen but once I use the code locally it doesn't work.

sophiamarinara Over a year ago

Just kidding--got it!

Collectives™ on Stack Overflow

jQuery mouseleave issues

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related