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

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

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

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

Зачем?


Обновление: я запустил все мои браузеры...

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

Проблема Chrome тогда...


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

3 ответа

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

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

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

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

  • В Chrome 9
  • В Safari 5.0.3

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

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

Решение:

Хром имеет :hover проблема. Особенно для <a>,

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

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

Другие вопросы по тегам