Jquery mouseover event documentation


When we hover a button on the menu the cursor changes to a pointer, and the mouse pointer moves to the selected elements. we given one example in previous article

mouseover link using javascript

when we move the mouse out from the button then the 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 has hovered on the outer div, the inner div will be shown.and when the 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>
<div id="menu-dropdown">
  <div class="dropdown-content">
    <p class="paragraph">Phoenix</p>

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 mouse enter the child have background: grey

#menu {
  border: 1px solid black;
#menu-dropdown {
  background: grey;
  width: 50%;

jQuery .hover( ) specifies two functions: one for the mouse enter event and one for the mouse leave 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( ):

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( ):

JQuery Mouseover( )

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

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

      $(".mega-menu").mouseenter(function() {
      $(".mega-menu, #menu-dropdown").mouseleave(function() {

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