How to run a code on mouseenter event in jQuery ?
In this article, we will see how to run the code when the mouse enters into the specific area using jQuery. To run the code on a mouse enter a specific area, mouseenter() method is used. The mouseenter() method works when the mouse pointer moves over the selected element.
Syntax:
$(selector).mouseenter(function)
Parameters: This method accepts single parameter function which is optional. It is used to specify the function to run when the mouseenter() method is called.
Example:
HTML
<!DOCTYPE html> < html > < head > < title > How to run a code on mouseenter event in jQuery? </ title > < script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" > </ script > < script > $(document).ready(function () { $(".main").mouseenter(function () { $(".main").css({ background: "green", color: "white" }); }); }); </ script > < style > body { text-align: center; } .main { width: 300px; height: 200px; border: 2px solid black; } </ style > </ head > < body > < div class = "main" > < h1 >w3wiki</ h1 > < h3 > How to run a code on mouseenter event in jQuery? </ h3 > </ div > </ body > </ html > |
Output: