Как применить стиль к псевдоэлементу :: after при наведении курсора :: before псевдоэлементом (не элементом host)? - PullRequest
Новая
       16

Как применить стиль к псевдоэлементу :: after при наведении курсора :: before псевдоэлементом (не элементом host)?

0 голосов
/ 01 января 2019

Есть похожие вопросы, но, по-видимому, такие же, как я, не нашел.Вопрос в следующем:

Как применить некоторые стили к псевдоэлементу :: after при наведении :: before псевдоэлемент (не элемент host)?

Пример кода: 

.contact {
  position: relative;
}

.contact::before {
  content: '';
  position: absolute;
  top: 0;
  right: -10px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: hotpink;
}

.contact::after {
  content: 'Preferred contact';
  font-size: 10px;
  color: #fff;
  padding: 5px 10px;
  position: absolute;
  top: 0;
  right: -15px;
  transform: translateX(100%);
  border-radius: 5px;
  background-color: rgba(0, 0, 0, .5);

  display: none;
}

.contact:hover::after {
  display: block;
}
    <span class="contact">skype_hello85</span>

Так что при наведении на сам элемент (span) - все нормально.Но я хочу, чтобы :: after показывался только при наведении :: before, а не на самом элементе хоста.

Спасибо за любую помощь!

1 Ответ

0 голосов
/ 01 января 2019

Вы можете применять стили к элементам, которые лежат внутри первого уровня DOM селектора.

Например: 

<div class="wrapper">
    ::before
    <p>Lorem ipsum dolor</p>
    ::after
</div>

wrapper класс содержит здесь p теги два псевдоэлемента ( :: before и :: after ), и все они лежат на одном уровне DOM и стилизуют элементы :: before , развивающиеся на :: после элемент невозможен.Единственный способ - применить стили к wrapper классу CSS или использовать JS.

Более подробную информацию вы можете получить здесь .

...