Mouse Hover event using JQUERY

Hover event is created by Mouse In and Mouse out over the element

Here is the syntax
$("element").hover(function(){mouse_in_function, mouse_out_function})
mouse_in_function : executes when the mouse pointer enters the element
mouse_out_function : executes when the mouse pointer leaves the element

We can trigger / execute our code while mouse enter into the area by using mouse_in_function and in same way we will execute our code while mouse_out_function . Both these functions we will execute and see the result in this demo.

By using hover effect we will try to change the background color of an div element.
DEMO of Hover Event

Using multiple elements

In above code we have used hover event to change the background color of single element. Now we will try to use the same code on multiple elements. We will use FadeTo effect on hover over the element .
	$(this).fadeTo('fast', 0.3);
	}, function(){$(this).fadeTo('fast', 1.0);});
Note the use of multiple elements and the function this() to identify the particular element where the event will be triggered.
Event Reference DEMO of Hover on multiple elements
Mouse enter and mouse leave events
  • Video Tutorial on Mouse Events


* indicates required
Subscribe to plus2net

    Post your comments , suggestion , error , requirements etc here .

    Most Popular JQuery Scripts


    Two dependant list boxes


    Calendar with Date Selection


    Data change by Slider


    Show & Hide element

    JQuery Video Tutorials

    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2024 All rights reserved worldwide Privacy Policy Disclaimer