How to use JQuery Event hover() Method

This article describe about jQuery Event hover() Method.
  • 2118

jQuery Event hover() Method

The function to the  mouseenter and mouseleave event are bind by the hover() method.

Bind Functions to the hover Event

When mouseenter and mouseleave event occur it define a function to run.

Function run for both mouseenter and mouseleave event if only one function specified.




Parameter Description
inFunction Required. it is define a function to run when mouseenter event occur.

This function run to both mouseenter and mouseleave event, if only one parameter specified.

outFunction Optional. it is define a function to run when mouseleave event occur.


<!DOCTYPE html>

<html >

<head >

<script type ="text/javascript" src="jquery.js"></script>

<script type ="text/javascript" >

    $(document).ready(function () {

        $("p").hover(function () {

            $("p").css("background-color", "Red");

        }, function () {

            $("p").css("background-color", "gray");






<body >

<p style ="background-color:Gray " >Hover the mouse pointer move over this paragraph </p>






hover method pic35.jpg


Note: After mouseenter over the paragraph, output become


hover method pic36.jpg

You may also want to read these related articles Click here

Ask Your Question 

Got a programming related question? You may want to post your question here

Programming Answers here


More Articles

© 2020 DotNetHeaven. All rights reserved.