Quick Reach
What is jQuery hover() method?
In modern websites, we usually see when the mouse pointer is moved to links or sometimes in content paragraphs or images etc. the color of link changes or other effects in images or entered paragraphs happen. This can be done in different ways, generally, the hover() method is used for this purpose.
The Hover jQuerymethod attaches or binds one or two event handlers or functions to the specified elements (like links, divs, paragraphs, images). These handlers or function executes as mouse pointer enters or leaves the specified/matched elements.
How to use the hover() method?
Following is the general syntax of using the hover method:
$( element).hover(handlerInFunction, handlerOutFunction)
e.g.
$(“p”).hover(handlerInFunction, handlerOutFunction)
$(“div”).hover(handlerInFunction, handlerOutFunction)
Where
- handlerInFunction : Required. This function will execute as mouse pointer enters the specified element
- handlerOutFunction: Optional. This handler or function will execute as mouse leaves the element.
If only one handler is given then it will execute for both the mouseenter and mouseleave events.
Running example of hover() method
In the following example, as the mouse enters the link area, the color of the link changes with the text in the paragraph as well. As the mouse is taken out of the link area the color will again change along with the text.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
<html>
<head>
<script src=“http://code.jquery.com/jquery-1.10.1.min.js”></script>
<script>
$(document).ready(function(){
$(“#mouseenter”).hide();
$(“#mouseleave”).hide();
$(“#hovertst”).hover(function(){
$(“#hovertst”).css(“color”,“red”);
$(“#mouseenter”).show();
$(“#mouseleave”).hide();
},function(){
$(“#hovertst”).css(“color”,“blue”);
$(“#mouseenter”).hide();
$(“#mouseleave”).show();
});
});
</script>
</head>
<body>
<a href=“” id=“hovertst”>hover method test</a>
<p id=“mouseenter”>Mouse is entered the link!</p>
<p id=“mouseleave”>Mouse pointer is out of link!</p>
</body>
</html>
|
Read also: jQuery mouseenter | jQuery mouseleave
Leave A Comment?