jQuery on Hover mouseenter and mouseleave events

0

jQuery is very useful when we want to change the element on mouse enter. Sometimes, We need to change the element property or element color and hide and show element on mouse hover. We are going to learn jQuery on Hover event with examples.

We are going to see hide and show element example on mouse hover step by step.

jQuery on Hover mouseenter and mouseleave events

First of all, We are going to see the syntax of the hover event. It’s too simple and useful.

$("element name").hover(
    function() {
        // Called when the mouse enters the element
    },
    function() {
        // Called when the mouse leaves the element
    }
 );

Now, We are going to see the example step by step.

First of all, We are going to create the HTML element like below

<div class="element-container">
  <div class="element hidechange-onhover">
      Hover Me!
  </div>
  <div class="element showelement-onhover">
      Show Me!
  </div>
</div>

Now, Let’s write the jQuery code to show the element when mouse enter.

(function($){
    $(document).ready(function(){
        $(".hidechange-onhover").hover(
            function() {
                $(".showelement-onhover").show();
            },
            function() {
                $(".showelement-onhover").hide();
            }
        );
    });
})(jQuery);

So, It’s too easy to hide and show element using jQuery.

See the Pen jQuery on Hover mouseenter and mouseleave events by Renish Khunt (@renishkhunt7) on CodePen.default

If you face any issue after following the code please write the comment below. We are always ready for help.

Share.

Leave A Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.