Home »
jQuery »
jQuery DOM Manipulation Methods
jQuery hover() Method
jQuery | hover() Method: Learn about the jQuery hover() Method with its usages, syntax, and examples.
Submitted by Pratishtha Saxena, on October 19, 2022
hover() Method
Events in jQuery are the actions that the user performs on the web page. It can be anything – related to mouse clicks, keyboard presses, etc. Using jQuery, we can control these events in the order we want and can also attach some custom functions to it if needed. That means, we can use predefined event methods for the actions and also define a function that gets fired when the event method is triggered. Overall, this makes the website more dynamic on the user's end. Let's learn about the hover() method here.
The hover() method is an inbuilt jQuery method. When the mouse pointer hovers, i.e., moves across the selected element, then the hover event triggers the hover() method which further fires the attached functions. It basically is a combination of – mouseenter() & mouseleave() methods in jQuery. Therefore, two functions have to be described for each – when the mouse enters and when the mouse leaves the element.
hover() Method Syntax
$('selector').hover(function_1, function_2);
The two functions are passed as their parameters. Function_1 represents the actions when the mouse pointer enters to hover the element. Whereas, Function_2 represents the actions to be taken when that pointer leaves.
The example given below shows how the text gets changed when the mouse pointer enters & leaves, i.e., hovers on the selected element.
jQuery hover() Method Example
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<h2>jQuery Event - Hover</h2>
<p>Hover the following element and see the result.</p>
<hr>
<div style="font-size: larger; color: teal; font-weight: bolder;" id="one">Welcome to Include Help !!! </div>
<hr>
<div id="two" style="font-size: larger; color: rgb(188, 118, 4); font-weight: bolder;"></div>
</body>
<script type="text/javascript">
$(document).ready(function(){
$('div#one').hover(function(){
$('div#two').html('Thank You for Visiting !!! ');
},function(){
$('div#two').html('Visit Again !!! ');
});
});
</script>
</html>
Output:
