0

所以我对 Jquery 和 Javascript 完全陌生，我一直在寻找一种在悬停时交换两个不同图像的方法。到目前为止没有任何反应......所以我的问题是为什么这个 Jquery 函数在悬停时不交换图像。

 jQuery(function(){
     $(".nav-button").hover(
          function(){this.src = this.src.replace("http://i1065.photobucket.com/albums/u381/dice027/nyan-cat.png","http://i1256.photobucket.com/albums/ii488/terafanb/guildwars2/26.png");},
          function(){this.src = this.src.replace("http://i1256.photobucket.com/albums/ii488/terafanb/guildwars2/26.png","http://i1065.photobucket.com/albums/u381/dice027/nyan-cat.png");
     });
});

这里是它操作的 html。 

<ul id="nav">
               <li class="nav-button"><img src="http://i1065.photobucket.com/albums/u381/dice027/nyan-cat.png" width="225" height="30" alt="" /></li>
               <li class="nav-button"><img src="http://i1065.photobucket.com/albums/u381/dice027/nyan-cat.png" width="225" height="30" alt="" /></li>
              <li class="nav-button"><img src="http://i1065.photobucket.com/albums/u381/dice027/nyan-cat.png" width="225" height="30" alt="" /></li>
               <li class="nav-button"><img src="http://i1065.photobucket.com/albums/u381/dice027/nyan-cat.png" width="225" height="30" alt="" /></li>
               <li class="nav-button"><img src="http://i1065.photobucket.com/albums/u381/dice027/nyan-cat.png" width="225" height="31" alt="" /></li>
               <li class="nav-button"><img src="http://i1065.photobucket.com/albums/u381/dice027/nyan-cat.png" width="225" height="30" alt="" /></li>
               <li class="nav-button"><img src="http://i1065.photobucket.com/albums/u381/dice027/nyan-cat.png" width="225" height="32" alt="" /></li>
               <li class="nav-button"><img src="http://i1065.photobucket.com/albums/u381/dice027/nyan-cat.png" width="225" height="30" alt="" /></li>
               <li class="nav-button"><img src="http://i1065.photobucket.com/albums/u381/dice027/nyan-cat.png" width="225" height="32" alt="" /></li>
               <li class="nav-button"><img src="http://i1065.photobucket.com/albums/u381/dice027/nyan-cat.png" width="225" height="30" alt="" /></li>
         </ul>

完全披露我在这里得到了该功能的设计http://www.designchemical.com/blog/index.php/jquery/quick-and-easy-jquery-image-swap/

这就是我测试功能的地方 http://codepen.io/Austin-Davis/pen/IpDLu

4

2 回答 2

8

因为您匹配的元素".nav-button"不是图像。所以this没有财产src。

用这个 ：

 $(".nav-button img").hover(
于 2013-01-07T16:16:04.727 回答
0

您this指的是$(".nav-button")，而不是$(".nav-button img")。一个更好的改变方法src是使用.attr()方法。

于 2013-01-07T16:20:06.320 回答