Home >>jQuery Tutorial >jQuery mouseenter() Method

jQuery mouseenter() Method

jQuery mouseenter() Method

jQuery mouseenter() method in jQuery is used to attaches a function or triggers the mouseenter event to run when a mouseenter event occurs.

Syntax:
Trigger the mouseenter event for the selected elements: $(selector).mouseenter()
Attach a function to the mouseenter event: $(selector).mouseenter(function)

Parameter Values

Parameter Description
function It is optional parameter and is used to specifies the function to run when the mouseenter event is triggered
Here is an Example of jQuery mouseenter() Method:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".txt").mouseenter(function(){
$(".txt").css("background-color", "lightgreen");
});
$(".txt").mouseleave(function(){
$(".txt").css("background-color", "green");
});
});
</script>
</head>
<body>
<p class="txt">Hover the mouse pointer over this paragraph.</p>
</body>
</html>

Output:

Hover the mouse pointer over this paragraph.