Why doesn't this CSS selector work: a:hover ~ span?

Question

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 ...

---

Note: As Chrome no longer contains this bug, this question is obsolete.

Madcap

@tenfour When you hover the ANCHOR all three SPAN elements should light up yellow... – Prevaricate

Weird. Interestingly, it works if you drop the :hover pseudo-class. – Moiety

does for me... Maybe your browser doesn't support CSS3? (even made it #FF00FF just to avoid confusion, and worked flawlessly on FF4) – Manassas

@Brad doesn't work in Chrome 9 – Moiety

@Pekka: Is CSS3 "officially released" yet? Could it just be some browsers have and haven't full implemented it? – Manassas

@Brad nope, but it works when I drop :hover which makes me think it's a bug or at least a bug-like phenomenon :) Edit: It even works in IE8. – Moiety

@Pekka: Undocumented feature. ;-) And I'm thinking it's just not implemented yet. – Manassas

@Brad CSS3 Selectors are currently at "proposed recommendation" level, which means that it's pretty mature. – Prevaricate

It works for you in Safari 5? Doesn't for me – Moiety

@Moiety Yep, Safari 5.0.3 on Win7. – Prevaricate

Weird, same for me and it doesn't work, behaves just like in Chrome. – Moiety

Safari 4.0 doesn't work either. Must be a bug. – Soggy

Answer 1

Looks like a Webkit bug related to using the :hover pseudo-class.

It works fine for me

• in FF 3.6.13
• in IE 8 of all browsers
• in Opera 11

It doesn't work for me

• In Chrome 9
• In Safari 5.0.3

Might be file-worthy.

Moiety

I had to laugh at "of all browsers". What, you insinuating IE's not always compliant? :grin: – Manassas

Seems to be a Webkit issue. It has been mentioned here: code.google.com/p/chromium/issues/detail?id=30753#c4 – Prevaricate

@Šime yup, that looks like it – Moiety

What a bummer... A:hover ~ B is such a nice feature, and now I can't use it because of stupid Chrome :) – Prevaricate

@Šime yeah, that's unusual! IE 8 does it, but cutting-edge Chrome does not. Doesn't happen every day. :) – Moiety

Answer 2

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.

Aswan

Answer 3

Solution:

Chrome has a :hover problem. Especially for <a>.

1. :hover doesn't work in Chrome:
   <a>Link</a>
2. :hover works in Chrome:
   <a href="#">Link</a>
3. :hover works in Chrome:
   <a href="javascript:void(0);">Link</a>

Note: You can use href="javascript:void(0)" instead of href="#". I prefer javascript:void(0).

Cavallaro

Works on Chrome 23 even for First 1 ie <a>Link</a> – Sanative