Jquery-MouseOver-Event

When we hover over a button on the menu the cursor changes to a pointer, and mouse pointer moves over the selected elements.
when we move the mouse out from the button then mouse should leave the selected element.

The main concept is we will add two divs, one inside the other. The outer div will always be displayed. The inner div will be hidden by default and once the mouse is hovered on the outer div, the inner div will be shown.and when mouse leaves the outer div then inner div should be hidden.

First we need to add the HTML. We create a div, .mega-menu inside it we add another div #menu-dropdown , which is hidden at first. Once the user moves their mouse over the .mega-menu div, the inside div is hidden.

<div id="menu">
  <ul class="menu-wrapper" style="padding:0px;margin:0px;">
    <li class="menu-item mega-menu">Home</li>
    <li class="menu-item">About</li>
    <li class="menu-item">Contact</li>
  </ul>
</div>
<div id="menu-dropdown">
  <div class="dropdown-content">
    <p class="paragraph">Phoenix</p>
  </div>
</div>

To implement this method we are using css and Jquery.
we creating one class and one ID. The Id is #menu-dropdown. In that Id we defined some properties like  display:none;  position:absolute;  width: 50%;  height:50%; and the class is .menu-item and properties are like display:inline-block;  background:#ddd;  padding:10px; and in HTML we used List order to show them in a menu header. the menu buttons have background:#ddd; and when mouseenter the child have background:grey.

body{
  margin:0px;
}
#menu {
  border: 1px solid black;
}
#menu-dropdown {
  display:none;
  position:absolute;
  background: grey;
  color:white;
  width: 50%;
  height:50%;
}
.menu-item{
  display:inline-block;
  background:#ddd;
  padding:10px;
}

jQuery .hover( ) specifies two functions: one for the mouseEnter event and one for the mouseLeave event.

JQuery Mouseenter( )

The mouseenter( ) method fires when the mouse enters an HTML element. This method will attach an event handler to the mouse enter event. We can do any operations by using this event handler.
The syntax for using mouseenter( ):
mouseenter()

JQuery Mouseleave( )

The mouseleave( ) method fires when the mouse leaves the selected element. This method will attach an event handler to the mouse leave event.
The syntax for using mouseleave( ):
mouseleave()

JQuery Mouseover( )

The mouseover event occurs when the mouse pointer is over the selected element.
The syntax for using mouseover( ):
mouseover()

The .hover( ) method binds handlers for both mouseenter and mouseleave events. You can use it to simply apply behavior to an element during the time the mouse is within the element.

 $(document).ready(function(){
      $(".mega-menu").mouseenter(function() {
          $('#menu-dropdown').stop().show();
      });
      
      $(".mega-menu, #menu-dropdown").mouseleave(function() {
        if(!$('#menu-dropdown').is(':hover')){
          $('#menu-dropdown').hide();
        };
      });
});

This method is working in the following browsers like,
Google Chrome,Mozilla Firefox,Safari ,Microsoft Internet Explorer – v.11.

Leave a Reply

Your email address will not be published. Required fields are marked *