Menu
a:hover + span { background:yellow; }
a:hover > span { background:yellow; }
a:hover ~ span { background:yellow; }
The first two selectors work just fine. However, the third selector does not work?
Demo: http://jsfiddle.net/UAHw7/
Why?
Update: I fired up all my browsers ...
Opera 11 - Works
Safari 5 - Works
Firefox 3.6 - Works
IE9 RC - Works
Chrome 9 - Does not work
A Chrome issue then ...
771
The :hover CSS pseudo-class matches when the user interacts with an element with a pointing device, but does not necessarily activate it. It is generally triggered when the user hovers over an element with the cursor (mouse pointer).
Increasing specificity by duplicating selector As a special case for increasing specificity, you can duplicate weights from the CLASS or ID columns. Duplicating id, class, pseudo-class or attribute selectors within a compound selector will increase specificity when overriding very specific selectors.
What is Specificity? If there are two or more CSS rules that point to the same element, the selector with the highest specificity value will "win", and its style declaration will be applied to that HTML element.
So, if you wanted the :hover effect to trigger whenever a user hovers over a <h3> element, you would specify h3 . :hover instructs the browser that the styles in the CSS rule should only be applied when the user is hovering over a certain element. This element is by the selector property.
Looks like a Webkit bug related to using the :hover pseudo-class.
It works fine for me
It doesn't work for me
Might be file-worthy.
145
It seems to me that you can't combine the general sibling selector ~ with the pseudo-class :hover; note that if you change the selector to a ~ span then both of the span elements turn yellow.
43
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
