How to change the color of any paragraph to red on mouseover event using jQuery ?
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= </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> |
Output:
Please Login to comment...