基于jQuery创建鼠标悬停效果的方法_jquery

WBOY

Release： 2016-05-16 16:11:02

Original

1289 people have browsed it

本文实例讲述了基于jQuery创建鼠标悬停效果的方法。分享给大家供大家参考。具体实现方法如下：

1. 创建HTML：

Copy after login

2. 选择.mainnav的class：

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

Copy after login

3. 建立变量imgPath，指定图片SRC：

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

Copy after login

4. 找到字符串off，用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"));
  }
);

Copy after login

希望本文所述对大家的jQuery程序设计有所帮助。

Related labels：

jquery create hover effect method mouse

source：php.cn

Previous article：Redis基本知识、安装、部署、配置笔记_基础知识 Next article：深入理解JavaScript系列（22）：S.O.L.I.D五大原则之依赖倒置原则DIP详解_基础知识

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact [email protected]