What is the mouseover() method in jQuery?

Overview

The mouseover() method triggers the mouseover event when the mouse pointer is over a selected element. It is a short-hand of the on('mouseover', eventHandler) event.

This method is triggered with the selected element even when the mouse pointer enters any child element.

Syntax

$(selector).mouseover(function());

Parameters

This method accepts only one parameter that is a function invoked when triggered by the mouseover() method.

Example

Let’s look at the code below:

Explanation

In the HTML tab:

  • Line 6: We create a div with id="content".
  • Line 7: We import the jQuery script.

In the JavaScript tab:

  • Line 4: We attach the mouseover() method on the element with the id of content (i.e., "#content").
  • Line 6: We use the css() method to change the background color of that element (i.e., "#content") when mouseover() is invoked.
  • Lines 10 to 15: We create a function, randomColor, that generates a random color and returns it.

Output

The mouseover() method is invoked once we move the mouse pointer over the square. As a result, the background color of the square changes.

Free Resources