Jump to content

Question about selecting adjacent classes via an id:hover


bluebomber
 Share

Recommended Posts

Hi there, I've recently been reading up a bit more about selectors to try and cut down my use of javascript - Currently I'm successfully selecting and modifying an elements properties using:.photo:hover + [class=a1](my understanding of this is that if the user hovers over an element with the class "photo" - select any adjacent element with the class "a1")Now I'd like to get the same behaviour but instead only when I hover over a particular ID - I'm using#photo1:hover + [class=a1](when the user hovers over the element with an ID of "photo1" then select adjacent elements with the class "a1")but I'm having no luck getting this to work - does anyone have any ideas why?

Link to comment
Share on other sites

are there multiple elements with that id (#photo)?
no.. in the actual page there are 10 DIV elements each with a unique ID - #photo1, #photo2 etc (all with the same class .photo)These 10 DIV's sit alongside the element with the "a1" class on the same "tree level"I've just realised what the problem is...I thought the + selector would pick all matching elements that sat on the same "sibling" level.. but now I realise that it only selects the matching element that actually sits next to the element in code.so in the case of <div id="photo1"></div><div id="photo2"></div><div id="photo3"></div><div id="marker" class="a1"></div>.. my CSS selection code will only work in the case of #photo3:#photo3:hover + [class=a1]the following 2 selectors do nothing at all:#photo1:hover + [class=a1]#photo2:hover + [class=a1]So I guess my question is, with the example I've given, can I make multiple elements with a different ID select the same one element (via its class) on:hover regardless of where they sit as long as they are all siblings?
Link to comment
Share on other sites

It fails absolutely in IE6 and Safari 1-2. IE7-8 have some trivial bugs. Mostly, don't put a comment element between the sibling elements, and don't try to select a sibling that is 298 elements away. I've never had a problem with that last one, and I rarely comment HTML.

Edited by Deirdre's Dad
Link to comment
Share on other sites

It sounds unreal, but consider: I have some "spreadsheets" out there that consist of a gazillion text inputs floating and clearing into columns and rows. 300 cells is only a 30 x 10 table. Not unrealistic. So in theory the general sibling selector could be used here and would fail in IE8OTOH, I've never had a reason to use one like that . . .

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...