jQuery Hover() Event Method

jQuery Hover() Event Method

jQuery Hover() event method; In this tutorial, you will learn what is jQuery hover event and how to use hover event with html elements.

jQuery Hover() Event Method

jQuery hover () event occurs when the mouse pointer enters and leaves the selected HTML element. The jQuery hover function will attach two event handlers to enter the mouse and leave the element.

The jQuery hover() method attaches handlers for mouse enter and mouse leave events.

Syntax of jQuery Hover() Event Method

$(selector).hover(inFunction,outFunction)   

Parameters of jQuery Hover() Event Method

  • InFunction :- It is a mandatory parameter. This is executed the function when mouseenter event occurs.
  • OutFunction :- It is an optional parameter. This is executed the function when mouseleave event occurs.

Examples of jQuery Hover() Event Method

Let’s see example 1 of hover event

<!DOCTYPE html>  
<html>  
<head> 
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>   
<script>  
$(document).ready(function(){  
    $("#first").hover(function(){  
        $(this).css("background-color", "red");  
        }, function(){  
        $(this).css("background-color", "green");  
    });  
});  
</script>  
</head>  
<body>  
<h4 id="first">Hover your mouse pointer on here!</h4>  
</body>  
</html>  

Result :-

Hover your mouse pointer on here!

In this above example 1, When we will cursor pointer on html elements, the jQuery hover method trigger.

Let’s see example 2 of hover event

<!DOCTYPE html>  
<html>  
<head> 
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>   
<script>  
$(document).ready(function(){  
    $("#second").hover(function(){  
        $( this ).append( $( "<b> Thank for reading </b>" ) );
        }, function(){  
        $( this ).find( "b:last" ).remove(); 
    });  
});  
</script>  
</head>  
<body>  
<h4 id="second">Hover your mouse pointer on here!</h4>  
</body>  
</html>  

Result :-

Hover your mouse pointer on here!

In this above example 2, When we will cursor pointer on html elements, the jQuery hover method trigger and show text “thanks for reading”.

Recommended jQuery Tutorials

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Node JS, Express JS, Vue JS, Angular JS, React Js, MySQL, MongoDB, REST APIs, Windows, Xampp, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL and Bootstrap from a starting stage. As well as demo example.

Leave a Reply

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