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

问题:

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.

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

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

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