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，因此您需要在img内找到next，然后更改其src。< / p>

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

演示：Fiddle

使用Jquery在悬停时更改图像？

2 个答案: