jQuery mouseover()

Introduction

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

View in separate window 

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

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

</body>
</html>

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

The mouseover() method triggers the mouseover event.

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

The mouseover event triggers if a mouse pointer enters any child elements and the selected element.

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

Trigger the mouseover event for the selected elements: 

$(selector).mouseover()

Attach a function to the mouseover event: 

$(selector).mouseover(function)
Parameter Optional Description
function Optional. function to run when the mouseover event is triggered



PreviousNext

Related