jQuery MouseOver, MouseOut, MouseMove Events

Today we are going to learn how to work with jQuery MouseOver, MouseOut, MouseMove events with practical examples, first let us understand what jQuery is?jQuery is a JavaScript library, and it was built to breadth life into static HTML web pages. This library is very much useful for traversing and manipulating HTML DOM tree. It comes with powerful event handling methods. It allows you to add smooth CSS animation in web pages, or you can also make Ajax request with it. jQuery is open-source software and comes with permissive MIT License and currently being used by almost 10 million websites across the globe.

In this tutorial, we will understand how can we use popular jQuery events such as MouseOver, MouseOut and MouseMove.

jQuery .mouseover() Method Examples

The jQuery .mouseover() event triggers when you take your mouse over any element in a web page. This event is automatically triggered when you go over a button, a navigation item, a dropdown, or any specific HTML element.

The Syntax

$(selector).mouseover(function)

The function is an optional parameter, and this function is called when the mouseover event is triggered.

Add Class with jQuery mouseover() Method

Add a selected class to an unordered list item when we hover over it.

$("ul").mouseover(() => {
    $("ul li").addClass( "selected" );
});

Add Background Color with mouseover()

In the following example, apply the background color to h1 title on mouseover the color changes to blue:

$("h1").mouseover(() => {
    $("h1").css("background-color", "blue");
});

jQuery .mouseout() Method Example

The .mouseout() method in jQuery is called when a user moves out the pointer from the specified HTML element.

The Syntax

$(selector).mouseout(function)

The function is an optional parameter, and this function is called mouseout event is triggered.

Apply Background Color using jQuery mouseout() Method

Let’s add the background color to pink when user mouse out from the paragraph tag.

$("p").mouseout(() => {
    $("p").css("background-color", "pink");
});

In another example we will append text when the mouse out event is triggered.

$( "#id" ).mouseout(function() {
  $( "#title" ).append( ".mouseout() event is called." );
});

jQuery .mousemove() Event Examples

The mousemove() method in jQuery triggers the mousemove event when the mouse pointer changes its location within the selected HTML element.

The Syntax

$(selector).mousemove(function)

The function is an optional parameter. This function is called when the mousemove event is triggered.

Apply background color to paragraph tag, when the user moves the mouse over h1 tag using jQuery .mousemove() method.

$(document).ready(function() { 
   $("h1").mousemove(function() { 
      $("p").css("background-color", "yellow"); 
   });
});

Final Thought

We have completed jQuery MouseOver, MouseOut, MouseMove events tutorial with examples. In this tutorial, we learned how to use various jQuery mouse methods to triggers some functions. Thanks for taking the time and going through this article.