In trying to answer a forum question, I started thinking about a method that has me stumped. I suppose my weakness is which browser has which quirk, but I digress.
Aside from older versions of IE, no surprise, it seem all browsers support adjacent selectors ( or at least that’s what all the compatibility charts I found on google seem to indicate).
The person I was trying to help wanted a to create a table with four columns, win which hovering on the first column ( not on the row) would have an effect on the fourth column. It being a table… I thought the solution would be simple… sibling selectors:
td:hover + td +td + td { attibute:value}
this technique seems to work is some browsers but not in others… like Safari 5 for mac. I would have thought taht it was something with the pseudo class :hover, but oddly enough the following works in all non IE browsers?!
What I meant to imply is I’d just make the whole row have the hover state, which would make a HELL of a lot more sense in most cases.
Though I’d have to see the data to say for sure. Hovering opposite ends of the same TR seems… a bit wierd if it’s tabular data - and if it’s not tabular data…
ie6… well, you know ie6, no sibling selector at all for it.
ch6, saf5 (meaning webkit) seem to support going down only one sibling on hover. sometimes, if you play hovering, they seem to recognize the selector for two siblings, but not in a consistent manner. equals buggy implementation.
no difference. the same culprits: ie6, ch6, saf5. even though ch6, saf5 apply the text indent, when it comes to hover they can work with only one adjacent selector.
does that mean Saf 4 works? I just don’t remembered the number of siblings ever being a factor before, it either worked or it didn’t ( ie IE) Besides, it a moot point in IE 6 and under as it doesn’t do :hover on anything but anchors.
I was just asking because IE usually the culprit for everything. In fact I usually just conditional link a js to emulate modern CSS in IE by default. It’s odd to discover a bug like this … and especially when Safari IS NOT listed as buggy in CSS compatibility charts
I am not sure classes would make a difference in this case a was trying to simulate a behaviour where hovering on the firsrt element would cause a change on the fourth. I suppose it’s worth trying out the difference between
td:hover + td + td +td{} and .mouse:hover + .skip + .skip + .act{}.
It would be an extremely selective and weird bug if it works like that