javascript - Mouseover Mouseleave - Child Submenu - Stack Overflow

admin管理员组

文章数量:1324426

I have the following Menu done using ul

<ul class="offerings">
   <li><a>NO SubMenu</a></li>
   <li><a>With SubMenu</a>
      <ul id="submenu">
        <li><a href="">SubMenu 1</a></li>
        <li><a href="">SubMenu 2</a></li>
      </ul>
   </li>

When I hover over <a>With SubMenu</a> With Submenu option, the corresponding Submenu (id=submenu) should display AND when I do MOUSEOUT on <a>With SubMenu</a> the Submenu should hide.

Hover is easy to achieve using mouseenter , but the problem is with mouseleave on <li><a>With SubMenu</a>.

Problem :

If the Submenu is open and the mouse moves inside the Box of of Submenu - Mouseout event is fired on <a>With SubMenu</a> causing the Submenu to Hide. How to tackle this scenario ?

Should i try mouse co-ordinates and then ignore the rest of function written in Mouseleave.

/

I have the following Menu done using ul

<ul class="offerings">
   <li><a>NO SubMenu</a></li>
   <li><a>With SubMenu</a>
      <ul id="submenu">
        <li><a href="">SubMenu 1</a></li>
        <li><a href="">SubMenu 2</a></li>
      </ul>
   </li>

When I hover over <a>With SubMenu</a> With Submenu option, the corresponding Submenu (id=submenu) should display AND when I do MOUSEOUT on <a>With SubMenu</a> the Submenu should hide.

Hover is easy to achieve using mouseenter , but the problem is with mouseleave on <li><a>With SubMenu</a>.

Problem :

If the Submenu is open and the mouse moves inside the Box of of Submenu - Mouseout event is fired on <a>With SubMenu</a> causing the Submenu to Hide. How to tackle this scenario ?

Should i try mouse co-ordinates and then ignore the rest of function written in Mouseleave.

https://jsfiddle/vkfc9jwc/6/

• javascript
• jquery
• html
• css
• menu

Share Follow asked Apr 5, 2016 at 7:51 user1428716user1428716 2,13433 gold badges1919 silver badges3838 bronze badges 1

• 1 why not using :hover via css? – Fabrizio Calderan Commented Apr 5, 2016 at 7:52

Add a ment  | 

7 Answers 7

Sorted by: Reset to default 8

Such thing can be achieved with css too:

ul ul{display:none;} /* hide the sub-list */

li:hover ul{display:block;} /* on hover of li show ul if "li" has */

<ul class="offerings">
  <li><a>NO SubMenu</a></li>
  <li><a>With SubMenu</a>
    <ul id="submenu">
      <li><a href="">SubMenu 1</a></li>
      <li><a href="">SubMenu 2</a></li>
    </ul>
  </li>
</ul>

If you want to do this with jQuery you just need to bind the events to the li instead of the a-Tag. But you should consider the answer by Jai.

$('.offerings').find('>li').on('mouseover',function(e){
    $("#eventFired").text('Fired XXX');
});

$('.offerings').find('>li').on('mouseout',function(e){
    $("#eventFired").text('mouseout Fired on A');
});

Your fiddle would look like this: https://jsfiddle/vkfc9jwc/7/

No need to use script for this, just use :hover rule

.offerings ul {
  display: none;
}
.offerings li:hover ul {
  display: block;
}

<ul class="offerings">
  <li><a>NO SubMenu</a>
  </li>
  <li><a>With SubMenu</a>
    <ul id="submenu">
      <li><a href="">SubMenu 1</a>
      </li>
      <li><a href="">SubMenu 2</a>
      </li>
    </ul>
  </li>
</ul>
<label id="eventFired">Class</label>

---

For some reason if you want to use script, then use mouseenter and mouseleave events. mouseover and mouseout event gets bubbled up that is why when the descendant elements are hovered the event is triggered.

You can use the .hover() function which is a utility method to add both mouseenter and mouseleave handlers

$('.offerings li:has(ul)').hover(function(e) {
  $(this).children('ul').toggle(e.type == 'mouseenter');
})

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="offerings">
  <li><a>NO SubMenu</a>
  </li>
  <li><a>With SubMenu</a>
    <ul id="submenu">
      <li><a href="">SubMenu 1</a>
      </li>
      <li><a href="">SubMenu 2</a>
      </li>
    </ul>
  </li>
</ul>
<label id="eventFired">Class</label>

Did you try JQuery Hover method?

$( "#submenu li" ).hover(
  function() {
    $("#eventFired").text('Sub Menu LI HOVER');
  }, function() {
    $("#eventFired").text('Sub Menu LI UN-HOVER');
  }
);

$( "#submenu" ).hover(
  function() {
    $("#eventFired").text('Sub Menu HOVER');
  }, function() {
    $("#eventFired").text('Sub Menu UN-HOVER');
  }
);

You can try like this:

$('.offerings').find('>li').on('mouseover',function(e){
  $("#submenu").css('display', "block");
});

$('.offerings').find('>li').on('mouseout',function(e){
  $("#submenu").css('display', "none");
});

You can try also this but as @Jai answered before this can be done easy with css

    $('.offerings').find('> li > a').on('mouseover',function(e){
    $("#eventFired").text('Fired XXX');
});

$('.offerings').find('> li > ul > li > a').on('mouseout',function(e){
    $("#eventFired").text('mouseout Fired on A');
});

I would remend the hover() function from jQuery library for you. First of all you need to google a jQuery library and add it into your project's <head> section in HTML document. That will make the jQuery load with your content. That's important step, because the script I'm going to show you would not work otherwise. The second step is to write actual script in jQuery after loading the jQuery library. The function hover() is separated into two parts. Function that begins on mouse-enter event is the first part of the hover function, the second part is function that begins on mouse-out event. Here is the working JSFiddle https://jsfiddle/h9ocupsh/1/ that shows you the functionality of hover().

So actually to be concrete, for you the hover function would look like this:

$(document).ready(function(){
    $(".hoverable").hover(function(){
        $("#submenu").show();
    }, function(){
        $("#submenu").hide();
    });
});

Important thing is to identify <li> element that triggers hover function. To do this I used class "hoverable" which you can add to your <li> element that triggers your hover function to make my script works. If you want to add a different class or id for that triggering <li> element you just need to re-write the $(".hoverable") to whatever you want. For example, if you'd like to use id "hover" for element that triggers the hover function you need to re-write it for: $("#hover") ... I hope you're getting into it. Just remember to use "." for class and "#" for id - like in CSS.

You then need to make a positioning for the submenu you show if it's not showing in the way you want it to.

I googled the jQuery lib for you, .. all you need to do is to include it in your HTML file before the jQuery scripts.

<script src="https://ajax.googleapis./ajax/libs/jquery/2.2.2/jquery.min.js"></script>

I hope it helped you.

EDIT:

Optional, you can add the time to the show() and hide() functions to slow down or speed up the showing or hiding. It would look like this: show(400). The value is in milliseconds.

EDIT 2:

The display value for your <ul id="submenu"> needs to be "none" in CSS. And I remend you to add the script I wrote for you to <head> section after implementing the jQuery lib. That will work just fine after that

本文标签： javascriptMouseover MouseleaveChild SubmenuStack Overflow