jQuery on Hover mouseenter and mouseleave events

jQuery on Hover mouseenter and mouseleave events

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.

Related Posts

  1. WordPress jQuery is Not Defined or undefined
  2. Bootstrap 4 show Dropdown menu on hover mouse
  3. How to use jQuery noConflict mode in WordPress
  4. jQuery append element at first position on the lists

Leave a Reply

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

Search Posts

Subscribe To Newsletter

Get Early Access To New Articles, Plugins, Discount Codes And Quickly Brief Updates about tips and tricks

Join 308 other subscribers