bluebomber Posted April 18, 2011 Share Posted April 18, 2011 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 More sharing options...
thescientist Posted April 18, 2011 Share Posted April 18, 2011 are there multiple elements with that id (#photo)? Link to comment Share on other sites More sharing options...
bluebomber Posted April 19, 2011 Author Share Posted April 19, 2011 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 More sharing options...
ShadowMage Posted April 19, 2011 Share Posted April 19, 2011 There is the CSS3 sibling selector:#photo1:hover ~ [class=a1]It may not work in older browsers though. Otherwise JavaScript is probably going to be your best solution. Link to comment Share on other sites More sharing options...
jeffman Posted April 19, 2011 Share Posted April 19, 2011 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. Link to comment Share on other sites More sharing options...
ShadowMage Posted April 19, 2011 Share Posted April 19, 2011 don't try to select a sibling that is 298 elements away. Link to comment Share on other sites More sharing options...
jeffman Posted April 19, 2011 Share Posted April 19, 2011 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 More sharing options...
bluebomber Posted April 20, 2011 Author Share Posted April 20, 2011 Thanks for the responses, I was unaware of the ~ selector. Link to comment Share on other sites More sharing options...
pjsfchaplin Posted April 22, 2011 Share Posted April 22, 2011 Out of interest, is there a reason for using [class=a1] instead of .a1 ? Link to comment Share on other sites More sharing options...
ShadowMage Posted April 22, 2011 Share Posted April 22, 2011 Out of interest, is there a reason for using [class=a1] instead of .a1 ?Personal preference. Functionally, they are identical. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.