I'm having trouble getting an arrow icon on my image slider to change when I hover over the image. I've tried different jquery methods, but nothing seems to be working. All I want is for the image to change without any fancy effects like fade-outs.
Here's the HTML:
<div class="next"><img src="next.png"></div>
<div class="prev"><img src="prev.png"></div>
And here's the 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;
}
Lastly, the Jquery code:
$('.next').hover(function(){
$(this).attr('src','prev.png');
},function(){
$(this).attr('src', 'next.png');
});