jQuery Hover Event

The jQuery .hover() helper accepts a function for pointer entry and another for pointer exit. For more explicit event handling, you can also use .on("mouseenter mouseleave", ...).

Hover Syntax Top ↑

$( "element" ).hover(
    function () {
        // Pointer entered.
    },
    function () {
        // Pointer left.
    }
);

Apply Hover to Multiple Elements Top ↑

$( "#d1, #d2" ).hover(
    function () {
        $( this ).fadeTo( "fast", 0.3 );
    },
    function () {
        $( this ).fadeTo( "fast", 1.0 );
    }
);

Open the hover demo →

For direct entry/exit control, continue with mouseenter and mouseleave. The fade behavior itself is covered in fadeTo().

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: