Как применить стили при наведении курсора только на ::первую строку элемента?
Я хочу сделать первую строку абзаца жирной только тогда, когда пользователь наводит курсор на первую строку абзаца. Я попробовал что-то вроде:
p::first-line:hover {
font-weight: bold;
}
Обратите внимание, что этот вопрос отличается от другого Вопроса о переполнении стека. Упомянутый вопрос касается того, как сделать первую строку абзаца жирной, когда пользователь наводит курсор на любую часть тега. Мой вопрос заключается в том, как сделать первую строку жирной, когда пользователь наводит курсор только на первую строку.
@ user12137152: Извините, по какой-то причине я неправильно прочитал ::first-child, поскольку ::first-line, мой (удаленный) комментарий и ссылка были основаны на недоразумении.
@DavidThomas, на самом деле это была моя ошибка, я ошибочно написал ::first-child. Я отредактировал вопрос. Теперь я отредактировал вопрос. Извините еще раз. :)
Ответы 2
То, как вы это пробовали, соответствует соответствующей спецификации CSS:
Например, поскольку псевдокласс
:hoverуказывает, что он может применяться к любому псевдоэлементу,::first-line:hoverбудет соответствовать при наведении курсора на первую строку.
Однако эта конкретная комбинация функций еще не реализована ни в одном браузере (например, Firefox v123 и Chromium v123). Не стесняйтесь протестировать этот фрагмент стека; когда это сработает, вы узнаете, что ваш браузер реализовал эту функцию:
p::first-line:hover {
color: blue;
}<p>Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>В будущем браузеры могут поддерживать это, и этот ответ может быть обновлен в это время. А пока вам нужно будет использовать JavaScript для достижения этой функциональности.
Спасибо за ответ. Можете ли вы прикрепить несколько ссылок, которые конкретно указывают на то, что такие функции не реализованы в браузерах. Я имею в виду, можете ли вы предоставить некоторые другие источники, которые предполагают, что в этих браузерах нет другого способа реализовать вышеуказанные селекторы каким-либо другим способом, например, box-decoration-break реализован как -webkit-box-decoration-break в Chrome и Safari. Таким образом, они могли быть реализованы, но с другим именем свойства.
@user12137152 user12137152 Ну, я не могу доказать обратное, кроме как показать вам в демо-версии, что стиль, разработанный в спецификации, не работает в любом браузере, в котором вы его запустите. Я добавлю один в почта. В системах отслеживания ошибок Chrome или Firefox может быть ошибка; вы можете подать заявку на эту проблему и посмотреть, будет ли она закрыта как дубликат существующей ошибки или нет - это также способ обнаружить существующую информацию о ней, которая не работает, если она действительно существует.
Единственный способ, который я могу придумать в настоящее время с CSS, - это немного хакерский подход, поскольку он вводит в DOM поддельный элемент.
Этот фрагмент помещает пробел над первой строкой, и его наведение вызывает изменение стиля в соседнем элементе p.
span:has(+p) {
position: absolute;
width: 100%;
height: 1lh;
background-color: transparent;
z-index: 1;
}
span:hover+p::first-line {
font-weight: bold;
position: relative;
padding: 0;
}<span></span>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>По крайней мере, во встроенном фрагменте стека это также меняет кернинг второй строки, когда кернинг первой строки изменяется для соответствия жирному стилю. В полноэкранном режиме дела обстоят еще хуже; кернинг всего абзаца смещается.
@TylerH Не уверен, что можно с этим поделать, если первая строка будет выделена жирным шрифтом - она почти наверняка выйдет за пределы своих предыдущих границ. Есть мнения?
Я не уверен, что можно что-то сделать без изменения рабочей группой способа применения свойств. Я просто указал на предостережение относительно конкретного стиля, выбранного для этой реализации (на случай, если кто-то из читателей может взять этот код и с ним сходить с ума).
Это было бы
:first-line, поскольку:first-childвыбирает только фактические элементы, но я ПОКА не верю, что его можно наводить по мере необходимости!