jQuery hover()

Introduction

Change the background color of a <p> element when the mouse pointer hovers over it:

<!DOCTYPE html>
<html>
<head>
<script 
 src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>//from  www.  j  a  v a 2 s  . c  o  m
<script>
$(document).ready(function(){
  $("p").hover(function(){
    $(this).css("background-color", "yellow");
    }, function(){
    $(this).css("background-color", "pink");
  });
});
</script>
</head>
<body>

<p>Hover the mouse pointer over this paragraph.</p>

</body>
</html>

The hover() method sets two functions to run when the mouse pointer hovers over the selected elements.

This method triggers both the mouseenter and mouseleave events.

If only one function is specified, it will be run for both the mouseenter and mouseleave events.

$(selector).hover(in_Function,out_Function)

Parameter	Optional	Description
in_Function	Required.	function to run when the mouseenter event occurs
out_Function	Optional.	function to run when the mouseleave event occurs

Previous Next