In this article we will explain how to use hover() method in jquery or how to make an effect on html element when mouse pointer moved on that element.


The jQuery hover() method executes two functions when the mouse pointer hovers over the selected elements. The hover() method triggers both the mouseenter and mouseleave events.

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



jQuery hover() example

Let's take an example to see the hover() effect in jQuery. In this example, when you hover your mouse pointer over the selected element the the background color of that selected element will be changed.

<!DOCTYPE html>
<html xmlns="">
    <title>Jquery Tutorials</title>
    <script src="Scripts/jquery-1.8.2.min.js"></script>
            $(document).ready(function () {
                $("div").hover(function () {
                    $(this).css("background-color", "blue");
                }, function () {
                    $(this).css("background-color", "red");
<div style="height:150px; width:300px;">Hover your mouse pointer on me to change  color!</div>     


How to use jQuery hover()event

I hope it will help to you after reading it.


 Let's check live example

Leave a comment

Make sure you enter the (*) required information where indicated. HTML code is not allowed.

You may also like