Почему этот селектор 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>
,
: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)
,