homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Gold Sponsor 2015!
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

jQuery hover question

5+ Year Member

Msg#: 4410782 posted 7:04 pm on Jan 25, 2012 (gmt 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.



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

Msg#: 4410782 posted 6:07 pm on Jan 26, 2012 (gmt 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.


5+ Year Member

Msg#: 4410782 posted 7:27 pm on Jan 26, 2012 (gmt 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.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved