homepage Welcome to WebmasterWorld Guest from 54.204.215.209
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
jQuery hover question
geoffb




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

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




msg:4411173
 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.

geoffb




msg:4411210
 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.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved