mouseover()

The mouseover event is occurred when you put your mouse cursor over the selected element .Once the mouseover event is occurred, it executes the mouseover () method or attach a function to run.

This event is generally used with mouseout() event.

Note: Most of the people are confused between mouseenter and mouseover.

Difference between mouseenter() and mouseover()

The mouseenter event is only triggered if the mouse pointer enters the selected element whereas the mouseover event triggers if the mouse cursor enters any child elements as well as the selected element.

Syntax:

snippet

$(selector).mouseover()

It triggers the mouseover event for selected elements.

snippet

$(selector).mouseover(function)

It adds a function to the mouseover event.

Parameters of jQuery mouseover() event

Parameter	Description
Function	It is an optional parameter. It executes itself when the mouseover event is triggered.

Example of jQuery mouseover() event

Let's take an example to demonstrate jQuery mouseover() event.

snippet

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("p").mouseover(function(){
        $("p").css("background-color", "lightgreen");
    });
    $("p").mouseout(function(){
        $("p").css("background-color", "orange");
      });
});
</script>
</head>
<body>
<p>Move your cursor over this paragraph.</p>
</body>
</html>

Output:

Move your cursor over this paragraph.

jQuery mouseover() event example 2

Let's see another example of jQuery mouseover() event.

snippet

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>mouseover demo</title>
  <style>
  div.out {
    width: 40%;
    height: 120px;
    margin: 0 15px;
    background-color: lightgreen;
  }
  div.in {
    width: 60%;
    height: 60%;
    background-color: red;
    margin: 10px auto;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 <div class="out">
  <span style="padding:20px">move your mouse</span>
  <div class="in"></div>
</div>
<script>
$( "div.out" )
  .mouseover(function() {
    $( this ).find( "span" ).text( "mouse over " );
  })
  .mouseout(function() {
    $( this ).find( "span" ).text( "mouse out " );
  });
</script>
</body>
</html>

Output: