Method to create mouseover effect based on jQuery_jquery

The example in this article describes how to create a mouse hover effect based on jQuery. Share it with everyone 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 the class of .mainnav:

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

3. Create variable imgPath and specify 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 will be helpful to everyone’s jQuery programming.