Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

jQuery hover question

7:04 pm on Jan 25, 2012 (gmt 0)

Junior Member

5+ Year Member

joined:Apr 20, 2008
posts: 133
votes: 0


I have a row of images each in an li. On page load I have asked jQuery to add a class to the first in the list which using CSS3 effects enlarges the image and adds a shadow.

So now Ihave 6 thumbnails, with the first highlighted, in effect. Im really new to jQuery and would like to find out how to get the other thumbnails on hover over to add that same class, but also remove the class from the first one if the user does hover over the other 5, and if none are hovered then the first is highlighted as at the start.

So far I only have this:

$(document).ready(function() {
$("#gallerySlideshow li img:first").addClass('test');

Thanks for any help.
6:07 pm on Jan 26, 2012 (gmt 0)

Senior Member

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Nov 28, 2004
votes: 0

The first thing you should probably do is use anchors around your images and operate on those instead. The anchor is the natural link element and inherently has hover states.

In either case, do part of what you're asking with pseudo classes in css:

#gallerySlideshow li img { /* some selector */ }
#gallerySlideshow li img:hover { /* some selector equivalent to class "test" */ }

Which now leaves you with only affecting the "first" one with jQuery.
7:27 pm on Jan 26, 2012 (gmt 0)

Junior Member

5+ Year Member

joined:Apr 20, 2008
posts: 133
votes: 0

Hi rocknbil,

Yes they are wrapped in <a> tags, I was originally using a css rule of li:first-child img which was when page opened applying a scale and shadow, then using an a:hover on the rest to achieve the same, that all works great BUT, the outstanding issue is that when the others are hovered over to return the first image back to a normal state, then when nothing is hovered over put the first image back to its scaled and shadow state! Which is where I need jQuery.

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members