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

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.

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.

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.

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