How to change the color of any paragraph to red on mouseover event using jQuery ?

Last Updated : 31 Mar, 2021

In this article, we will learn how to change the color of any paragraph to red on a mouseover event.

Approach: This can be achieved by using the on() method of jQuery to attach an event handler function on a mouseover event. This event fires when the user hovers the cursor on any paragraph. The handler from the on() method is defined as an anonymous function that changes the CSS style of the paragraph using the css() method in jQuery. It applies the color of red using the this binding, thereby changing the color of the clicked paragraph to red.

Syntax:

$("p").on("mouseover", function() {
    $(this).css("color", "red");
});

Example: In this example, the paragraph element will change to red whenever the user hovers over it.

HTML

<html> 
<head> 
  <script src= 
"https://code.jquery.com/jquery-git.js"> 
  </script> 
  <style> 
    p { 
      color:blue; 
      font-size: 24px 
    } 
  </style> 
</head> 
  
<body> 
  <h1 style="color: green;"> 
    GeeksForGeeks 
  </h1> 
  <p> 
    This paragraph's color will change 
    to red when hovered over. 
  </p> 
  
  <script> 
  
    // Add the mouseover event handler to 
    // the paragraph element 
    $("p").on("mouseover", function () { 
  
      // Set the text color of  
      // this element to red 
      $(this).css("color", "red"); 
    }); 
  </script> 
</body> 
</html>