jQuery mouseenter()

Introduction

Set the background color to yellow, when the mouse pointer enters a <p> element:

<!DOCTYPE html>
<html>
<head>
<script 
 src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>/*from  w  w  w .  j  a  v  a  2  s .  co  m*/
<script>
$(document).ready(function(){
  $("p").mouseenter(function(){
    $("p").css("background-color", "yellow");
  });
  $("p").mouseleave(function(){
    $("p").css("background-color", "lightgray");
  });
});
</script>
</head>
<body>

<p>Move the mouse pointer over this paragraph.</p>

</body>
</html>

The mouseenter event occurs when the mouse pointer is over the selected element.

The mouseenter() method triggers the mouseenter event.

The mouseenter() method can also run a function when a mouseenter event occurs.

The mouseenter event only triggers when the mouse pointer enters the selected element.

While the mouseover event is triggered if a mouse pointer enters any child elements.

Trigger the mouseenter event for the selected elements:

$(selector).mouseenter()

Attach a function to the mouseenter event:

$(selector).mouseenter(function)

Parameter	Optional	Description
function	Optional.	function to run when the mouseenter event is triggered

Previous Next