Получить: первую букву: элемент hover с CSS - PullRequest
6 голосов
/ 25 декабря 2010

Можно ли получить первую букву элемента в режиме наведения?Вот как это будет выглядеть - я думаю - но в Chrome 10 это не работает:

p:hover:first-letter

или

p:first-letter:hover

Технически (imho) они не одинаковы.Первая занимает первую букву элемента зависания.Второе занимает весь элемент, если первая буква зависла.Мне нужно первое.

Как вы можете видеть на http://css4.hotblocks.nl, если вы «включаете» блоки CSS, оба не работают.

Мне нужна только первая буквакрасный цвет элемента, когда весь элемент находится в режиме: hover.Возможно ли без дополнительных тегов HTML ?Спасибо.

- изменить Я изменил мой онлайн-пример в лучшую сторону.CSS теперь разделен на отдельные блоки <style>.Делает для облегчения включения и выключения испытаний.

Вывод - пока !?- это: в Firefox 3.6 / 4 a:first-letter:hover ничего не делает (хорошо), а a:hover:first-letter работает отлично (хорошо!).В Chrome 10 a:first-letter:hover ничего не делает (хорошо), а a:first-letter:hover нарушает предыдущее CSS-выражение.(В моем примере он ничего не ломает, потому что он находится в отдельном блоке <style>.) Что приводит нас к следующему: Google Chrome снова отстает от Firefox = (--edit

Ответы [ 2 ]

5 голосов
/ 25 декабря 2010

Я проверил ваш пример и должен сказать, что он работает, на Fx 3.6.13

p:hover:first-letter {
    color: blue
}

Единственное, что вам нужно сделать, это изменить цвет первой буквы. Потому что у hover тот же цвет, что и у текста, поэтому вы не заметили никаких визуальных изменений.

4 голосов
/ 25 декабря 2010

И псевдоэлементы :first-line и :first-letter определены в спецификации как относящиеся только к блокам . Элемент a является встроенным по умолчанию, поэтому :first-letter не применяется к нему, пока вы не измените его на блочный элемент. Я думаю, что Chrome действительно работает здесь правильно, хотя это неудобно, и я не знаю, почему W3C не пришло в голову, что встроенные элементы также могут иметь первые буквы.

В качестве заведомо несовершенного обходного пути вы можете добавить a {display: inline-block} или аналогичный, чтобы получить стиль.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...