Почему этот селектор CSS не работает: a: hover ~ span? 

a:hover + span { background:yellow; }
a:hover > span { background:yellow; }
a:hover ~ span { background:yellow; }

Первые два селектора работают отлично. Однако третий селектор не работает?

Демо: http://jsfiddle.net/UAHw7/

Почему?

Обновление: Я активировал все свои браузеры...

Opera 11 - Работает Safari 5 - Работы
Firefox 3.6 - Работы
IE9 RC - Работы
Chrome 9 - не работает

Проблема Chrome затем...

Примечание. Поскольку Chrome больше не содержит эту ошибку, этот вопрос устарел.

Ответы

Ответ 1

Похож на ошибку Webkit, связанную с использованием псевдокласса :hover.

Это отлично работает для меня

  • в FF 3.6.13
  • в IE 8 всех браузеров
  • в Opera 11

Это не работает для меня

  • В Chrome 9
  • В Safari 5.0.3

Может быть достойным файла.

Ответ 2

Мне кажется, что вы не можете объединить общий селектор sibling ~ с псевдоклассом :hover; обратите внимание, что если вы измените селектор на a ~ span, то оба элемента span станут желтыми.

Ответ 3

Решение:

У Chrome есть проблема с :hover. Особенно для <a>.

  • :hover не работает в Chrome:
    <a>Link</a>
  • :hover работает в Chrome:
    <a href="#">Link</a>
  • :hover работает в Chrome:
    <a href="javascript:void(0);">Link</a>

Примечание. Вы можете использовать href="javascript:void(0)" вместо href="#". Я предпочитаю javascript:void(0).