使用 Jquery 更改悬停图像？

Question

我在图像滑块上有一个箭头图标，当我将鼠标悬停在图像上时，我只想改变图像。我目前一直在玩各种 jquery，但似乎没有任何效果。我不需要任何花哨的东西，例如淡出，只需在悬停时更改图像。

HTML

<div class="next"><img src="next.png"></div>
<div class="prev"><img src="prev.png"></div>

CSS

.next img{
position: absolute;
height: 50px;
width: 50px;
top: 315px;
right: 570px;
z-index: 99;
}

.prev img{
position: absolute;
height: 50px;
width: 50px;
top: 315px;
left: 550px;
z-index: 99;

}

jQuery

$('.next').hover(function(){
$(this).attr('src','prev.png');
},function(){
 $(this).attr('src', 'next.png'); 
});

Answer 1

这没有javascript：

<div class="next"></div>
<div class="prev"></div>

.next {
  background: url(next.png) no-repeat;
}
.next:hover {
  background: url(prev.png) no-repeat;
}

.prev {
  background: url(prev.png) no-repeat;
}
.prev:hover {
  background: url(next.png) no-repeat;
}

Answer 2

next 是div 而不是img 所以你需要在next 中找到img 然后更改它的src。

$('.next').hover(function () {
    $(this).find('img').attr('src', 'prev.png');
}, function () {
    $(this).find('img').attr('src', 'next.png');
});

演示：Fiddle