Question

所以我对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

Answer 1

因为与".nav-button"匹配的元素不是图像。因此this没有属性src。

使用此：

 $(".nav-button img").hover(

Answer 2

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

为什么这个图像交换不起作用

2 个答案: