信鸽网

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

  作者：bea

本文实例讲述了基于jQuery创建鼠标悬停效果的方法。分享给大家供大家参考。具体实现方法如下： 1. 创建HTML： <ul><li><a href="/tv"><img src="images/tv_off.gif" class="mainnav"></a></li></ul> 2. 选择.mainnav的class： $(".mainnav").hover( function (

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


1. 创建HTML：




<ul>

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

</ul>


2. 选择.mainnav的class：




$(".mainnav").hover(

 function () {

 },

 function () {

 }

);


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




$(".mainnav").hover(

 function () {

  // Grab the source

  var imgPath = $(this).attr("src");

 },

 function () {

  // Grab the source

  var imgPath = $(this).attr("src");

  }

);


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"));

  }

);


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




有用  |  无用

猜你喜欢

您可能感兴趣的文章: