hover() Method - Javascript jQuery Method and Property

Javascript examples for jQuery Method and Property:hover

  1. HOME
  2. Javascript
  3. jQuery Method and Property
  4. hover

Description

The hover() method sets two functions as event handler for both the mouseenter and mouseleave events.

If one function is set, it will be called for both the mouseenter and mouseleave events.

Syntax 

$(selector).hover(in,out);
Parameter Require Description
in Required. function to run when the mouseenter event occurs
out Optional. function to run when the mouseleave event occurs

The following code shows how to change the background color of a <p> element when the mouse pointer hovers over it:

Demo Code

ResultView the demo in separate window 

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

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

</body>
</html>

Related Tutorials