I have an arrow icon on an image slider and when I hover over the image I just want the image to change. I currently have been playing around with various jquery but nothing seems to be working. I don't need anything fancy such as fade-outs, just change the image on hover. 

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

```