w3resource

jQuery: Change the color of any paragraph to red on mouseover event

jQuery Fundamental - II : Exercise-65

Change the color of any paragraph to red on mouseover event.

Sample solution :

HTML Code :

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-git.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Change the color of any paragraph to red on mouseover event.</title>
</head>
<body>
<p>jQuery Exercises, Practice and Solution.</p>
<p>Ajax Tutorial</p>
</body>
</html>

CSS Code :


p {
color: blue;
font-size: 24px
}

JavaScript Code :

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

See the Pen jquery-fundamental-exercise-65 by w3resource (@w3resource) on CodePen.


Contribute your code and comments through Disqus.

Previous: Get the styles (width, height, text color, and background color) of a clicked division.
Next: Increase the width of a division by specified pixels once it is clicked.

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.



Follow us on Facebook and Twitter for latest update.