jQuery hover question

[geoffb]

Hi,

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.

[rocknbil]

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.

[geoffb]

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.