Почему этот селектор CSS не работает: a: hover ~ span? - PullRequest
Новая
       23

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

6 голосов
/ 21 февраля 2011 
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 больше не содержит эту ошибку, этот вопросустарел.

Ответы [ 3 ]

4 голосов
/ 21 февраля 2011

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

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

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

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

  • в Chrome 9
  • В Safari 5.0.3

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

3 голосов
/ 21 февраля 2011

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

0 голосов
/ 06 октября 2012

Решение:

В Chrome проблема :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).

...