How to show div on hover jquery mouseover

Show div on hover using  JQuery, hiding and showing a div in HTML is really simple. In this demo will show div on hover  when mouse hover on a particular  button or span.
The main concept is here we will add  ‘show div’ outside of inner div, one is inside and 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 is 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  #menu-dropdown , 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 mouseenter the child it show  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 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()

 $(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.

Demo

Leave a Reply

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