Code has been added to clipboard!

Learn to Use jQuery .mouseover() to Attach Event Handlers

Reading time 2 min
Published Jan 9, 2018
Updated Sep 27, 2019

jQuery mouseover: Main Tips

  • The .mouseover() method in jQuery can either trigger a mouseover event, or attach an event handler to it.
  • The mouseover event occurs when the cursor enters an element.
  • While this method works very similarly to .mouseenter(), it reacts to event bubbling (.mouseenter() does not).

.mouseover() Method Explained

The jQuery .mouseover() method attaches an event handler, running a function when the mouseover event occurs. The method can also trigger the jQuery mouse over event.

In the example, the background color of the paragraph changes to red as you move the cursor over it:

$("p").mouseover(() => {
    $("p").css("background-color", "red");
  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features
Main Features
  • Nanodegree programs
  • Suitable for enterprises
  • Paid certificates of completion
  • Professional service
  • Flexible timetables
  • A variety of features to choose from
Main Features
  • Professional certificates of completion
  • University-level courses
  • Multiple Online degree programs
  • Great user experience
  • Offers quality content
  • Very transparent with their pricing
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable

Syntax for .mouseover() in jQuery

To trigger a mouseover event manually, use the jQuery .mouseover() method without any arguments:


To attach an event handler, you will have to include at least one parameter:

$("selector").mouseover(data, callback);

The callback parameter defines the callback function that you wish to attach as the event handler. If the function you chose needs some data to execute properly, you can add it in the brackets before specifying the function.

Note: when adding an event handler with jQuery .mouseover(), remember that it is a shortcut for .on( "mouseover", callback). Thus, you can remove the handler simply by using .off().

jQuery .mouseover() or .mouseenter()?

A common issue beginners face is understanding the difference between jQuery .mouseenter() and .mouseenter(). You won't see any difference using them on elements with no descendants. However, when elements do have children, these methods behave differently:

var i = 0;
$( "div.overout" )
  .mouseover(function() {
    $( "p:first", this ).text( "mouse over" );
    $( "p:last", this ).text( ++i );
  .mouseout(function() {
    $( "p:first", this ).text( "mouse out" );
var n = 0;
$( "div.enterleave" )
  .mouseenter(function() {
    $( "p:first", this ).text( "mouse enter" );
    $( "p:last", this ).text( ++n );
  .mouseleave(function() {
    $( "p:first", this ).text( "mouse leave" );

The difference is caused by event bubbling, which jQuery .mouseover() supports and .mouseenter() does not. Event bubbling means that when an event occurs, its handlers are executed on the specified element first and then run on its parent (and other ancestors, if found).

Note: while the CSS :hover selector might seem like a similar option, it does the job of both .mouseover() and .mouseout() at once: the applied effect disappears after you move the cursor out.

Latest Udacity Coupon Found:



Udacity Black Friday Offer

The best time to save on Udacity courses is now - follow this coupon to access a 75% Udacity Black Friday discount & enjoy learning at a very low cost!

Expiration date: 21/01/2021
3176 People Used
Only 97 Left