基於jQuery創建滑鼠懸停效果的方法_jquery

本文實例講述了基於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程式設計有所幫助。