jQuery mouseenter() method
The mouseenter event occurs when the mouse enters, the pointer of the mouse, into the selected element. For example a paragraph, div. The mouseenter() method is used to perform a certain action as the mouseenter event takes place.
The mouseenter is generally used with the mouseleave event.
Syntax
$(selector). mouseenter(function)
Where function is optional. It runs as double click event occurs.
e.g.
$(“p”). mouseenter(function)
$(“div”). mouseenter(function)
$(“button”). mouseenter(function)
An example of mouse enter method
Below is running examples of mouseenter() method with <p> HTML element.
Experience this example online
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
| <!DOCTYPE html> <head> <title>jQuery Events</title> <script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script> <script type=“text/javascript” language=“javascript”> $(document).ready(function(){ $(“#mouseevent”).mouseenter(function(){ $(“#mouseevent”).css(“background-color”,“red”); }); }); </script> <style type=”text/css”> .stylespec{ background-color:#00ffff; width:400px; height:50px; border-style: solid; border-width: 1px; } </style> </head> <body> <p class=“stylespec” id=“mouseevent”>As mouse enters this parapgraph background color will be changed!</p> </body> </html> |
Read also: jQuery click
Leave A Comment?