Как изменить стиль CSS первой буквы при наведении на родительский элемент?

Вероятно, это то, что я просто тупо пропускаю, но не могли бы вы сказать, почему при наведении курсора на второй элемент деления цвет фона первой буквы не меняется на rgb (50,50,50) с rgb (150,150,150)? ?

Наведение указателя мыши над первым делением, которое начинается без стилизации на первой букве, реагирует на изменения стиля при наведении. Но второе деление, которое начинается с тех же стилей, которые отображает первое при наведении, не меняется на более темный фон при наведении.

Я использую последнюю версию Firefox для разработчиков. Теперь я вижу, что это работает в Chrome; так должно быть проблема Firefox.

Спасибо.

div > p:before { content: 'This text.' }

div:nth-child(2) > p::first-letter,
div:first-child:hover > p::first-letter
{
 float: left;
 padding: 0.5rem;
 background-color: rgb(150,150,150);
}

div:nth-child(2):hover > p::first-letter
{
 background-color: rgb(50,50,50);
}
<div><p></p></div>

<div><p></p></div>

Этот фрагмент работает в Firefox. Похоже, что для того, чтобы стиль ::first-letter был стилизован как без, так и с :hover письмо должно быть там отдельно от контента, добавленного :before или :after .

div > p:after { content: 'his text.' }

div > p::first-letter
 {
   float: left;
   padding: 0.5rem;
   background-color: rgb(150,150,150);
  }
  
div:hover > p::first-letter
 {
  background-color: rgb(70,70,70);
  color: white;
 }
<div><p>T</p></div>

Я применил решение @Sydney Y к приведенному выше фрагменту, чтобы показать, что оно работает в Firefox. Я не думаю, что это проблема :hover не распознается, потому что фрагмент кода выше распознает его. Похоже, проблема заключается в том, что текст, добавленный через :before { content: ... } , не включается, так что есть первая буква, к которой применяется стиль. Но добавление контента в :hover с использованием :after кажется, не меняет этого и работает с переменным контентом.

Я понимаю, что это малоинтересно для тех, кто не хочет использовать буквицы и менять свой стиль в зависимости от наведения.

div > p:before { content: 'This text.' }

div > p::first-letter
 {
   float: left;
   padding: 0.5rem;
   background-color: rgb(150,150,150);
  }
  
div:hover > p::first-letter
 {
  background-color: rgb(70,70,70);
  color: white;
 }
 
 div:hover > p:after { content: '' }
<div><p></p></div>

Всего 2 ответа


Да, просто некоторые ошибки, ваши аксессоры верны. Каждый блок CSS должен применяться к обоим div:

  div > p:before { content: 'This text.' }

div> p::first-letter {
  padding: 0.5rem;
  background: red;
 }

div:hover> p::first-letter{
 background: black;
}

div:hover > p:after { content: '' }

Спасибо за фрагмент, это круто!

Редактировать: все ближе! Код обновлен. Все еще пытаюсь на Firefox.

Редактировать: Решено, вид. Это работает, но это своего рода хак. Проблема: в Firefox при наведении указатель мыши не запускает перерисовку в этом конкретном случае, поэтому я добавил пустой указатель содержимого при наведении, потому что: after или content, похоже, имеют вид зацепки. Вы можете добиться того же с помощью другого хака, отличного от контента.

Но хорошие новости: это работает как в Chrome, так и в Firefox.

Крутая проблема. Я не могу представить, чтобы когда-либо сталкивался с этой проблемой снова, но было очень интересно устранять проблемы.


В Firefox есть ошибка, что nth-child () не будет работать с синтаксисом, поэтому он не работает. В любом случае, если вы не хотите использовать ту же функциональность, что и первая, с другим цветом, это можно сделать, просто поставив hover перед этим кодом "div: nth-child (2)> p :: first-letter, div: first- child: hover> p :: first-letter ". Я надеюсь, это поможет. https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child


Есть идеи?

10000