Changing image on hover using Jquery?

Question

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

Possible Duplicate: stackoverflow.com/questions/540349/…

Spencer Wieczorek
– Spencer Wieczorek

2014-09-12 01:53:00 +00:00
Commented Sep 12, 2014 at 1:53 — Spencer Wieczorek
– Spencer Wieczorek, Commented Sep 12, 2014 at 1:53
possible duplicate of jQuery, image changing on hover

T J
– T J

2014-09-12 05:14:27 +00:00
Commented Sep 12, 2014 at 5:14 — T J
– T J, Commented Sep 12, 2014 at 5:14

Deep · Accepted Answer · 2014-09-12 01:41:12Z

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

answered Sep 12, 2014 at 1:41

Deep

2,5442 gold badges17 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user3769402 Over a year ago

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?

Deep Over a year ago

of course - CSS is "static" declaration, but not "dynamic" interpreted like js/jquery. Its fastly

Arun P Johny · Accepted Answer · 2014-09-12 01:38:36Z

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

Collectives™ on Stack Overflow

Changing image on hover using Jquery?

2 Answers 2

2 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Linked

Related