How to show div on hover jquery mouseover

show div on hover

Show div on hover using  JQuery, hiding and showing a div in HTML is really simple. This demo will show div on hover when the mouse hovers on a particular button or span.
The main concept is here we will add  ‘show div’ outside of inner div, one is inside and the rest of the div is outside. 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.

We will use the CSS for hover. If we want to hide the div once the user has moved their mouse over it.

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

<span class="menu-item mega-menu">Home</span>

<div id="menu-dropdown">
  <p class="paragraph">Phoenix</p>
</div>

Next, we have to add some CSS. 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 .mega-menu and when mouse enters the child it shows background: grey color.

body{
  margin:0px;
}
.mega-menu {
  border: 1px solid black;
}
#menu-dropdown {
  display:none;
  background: grey;
  color:white;padding:10px;
  width:150px;margin:auto;
}

finally, we using jquery for action performance.
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( ):
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()

 $(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();
        };
      });
});

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.
That’s all you need to make this work. Now, it’s up to you; style it and make it look nice with some CSS coding.