-1

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'); 
});
user3769402
  • 201
  • 1
  • 4
  • 11
  • Possible Duplicate: http://stackoverflow.com/questions/540349/change-the-image-source-using-jquery – Spencer Wieczorek Sep 12 '14 at 01:53
  • possible duplicate of [jQuery, image changing on hover](http://stackoverflow.com/questions/17507870/jquery-image-changing-on-hover) – T J Sep 12 '14 at 05:14

2 Answers2

3

This without 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;
}
Deep
  • 2,472
  • 2
  • 15
  • 25
  • Other then keeping it all in css and avoiding jquery, is there any benefit to not using jquery. I'm just wondering for the future? – user3769402 Sep 12 '14 at 01:44
  • of course - CSS is "static" declaration, but not "dynamic" interpreted like js/jquery. Its fastly – Deep Sep 12 '14 at 01:47
1

next is the div not the img so you need to find the img inside the next then change its src.

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

Demo: Fiddle

Arun P Johny
  • 384,651
  • 66
  • 527
  • 531