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

Comment on “How to show div on hover jquery mouseover

  1. A lot of of whatever you mention happens to be astonishingly precise and that makes me ponder why I had not looked at this with this light previously. This article really did switch the light on for me as far as this particular topic goes. But there is 1 point I am not too comfortable with and whilst I try to reconcile that with the core theme of the issue, permit me see exactly what the rest of the readers have to point out.Very well done.

Leave a Reply

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