A method for creating mouse hover effects based on jQuery

This article demonstrates an example of how to create a mouse hover effect based on jQuery. Share with you for your reference. The specific implementation method is as follows:

1. Create HTML:

<ul>
<li><a href="/tv"><img src="images/tv_off.gif" class="mainnav"></a></li>
</ul>

2. Select class from mainnav:

$(".mainnav").hover(
 function () {
 },
 function () {
 }
);

3. Create the variable imgPath and specify the image SRC:

$(".mainnav").hover(
 function () {
 // Grab the source
 var imgPath = $(this).attr("src");
 },
 function () {
 // Grab the source
 var imgPath = $(this).attr("src");
 }
);

4. Find the string off and replace it with on:

$(".mainnav").hover(
 function () {
 // Grab the source
 var imgPath = $(this).attr("src");
 // Replace the path in the source
 $(this).attr("src",imgPath.replace("off", "on"));
 },
 function () {
 // Grab the source
 var imgPath = $(this).attr("src");
 // Replace the path in the source
 $(this).attr("src",imgPath.replace("on", "off"));
 }
);

I hope this article has been helpful to your jQuery programming.