html - hovering::before 伪元素(不是宿主元素)时如何在::after 伪元素上应用样式？

Question

那里有类似的问题，但显然我没有找到类似的问题。所以问题是:

悬停在::before 伪元素(不是宿主元素)时，如何在::after 伪元素上应用一些样式？

代码示例:

.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>

所以当悬停元素(跨度)本身时 - 一切都很好。但我希望::after 仅在::before 悬停时显示，而不是宿主元素本身。

感谢您的帮助!

Answer 1

您可以将样式应用于第一个选择器 DOM 级别内的元素。

例如:

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

wrapper 类在这里包含 p 标签和两个伪元素(::before 和 ::after ) 并且它们都位于一个 DOM 级别并且样式化 ::before 元素 devepeding on ::after 元素是不可能的。唯一的方法是将样式应用于 wrapper CSS 类或使用 JS。

更多信息您可以获得here .