Jquery 为什么'；这个图像交换不行吗

所以我对Jquery和Javascript完全陌生，我一直在寻找一种在hover上交换两个不同图像的方法。到目前为止什么都没发生。。。所以我的问题是为什么这个Jquery函数不在hover上交换图像

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

<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>

这里是它所操纵的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>

充分披露我在这里得到的功能设计

<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>

这就是我测试函数的地方

---

因为与

“.nav按钮”

匹配的元素不是图像。所以

这个

没有属性

src

<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>

使用以下命令：

<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>

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

---

您的

此

指的是

$（“.nav按钮”）

，而不是

$（“.nav按钮img”）

。更改

src

的更好方法是使用

.attr（）

方法。

这不在正确的范围内。代码中的this.src是LI的src，而不是IMGHow更好地使用了

attr

方法？我已经使用了这两种方法，并且发现attr（）更可靠。

<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>