我应该为元素使用哪个选择器，这取决于伪元素的悬停行为？

Question

我制作了一个带有伪元素的汉堡菜单。现在，如果悬停了一个伪元素，我需要显示一个菜单。我可以这样选择:.header:hover:before但是我不能强迫菜单依赖它。

这是html的结构：

<header class="header">
    <a href="#"><img src="img/logo.svg" alt="logo" class="logo logo_header"></a>
    <nav class="menu menu_header">It's a menu</nav>
    <div class="contacts-header">Some contacts here</div>
</header>

这是CSS：

.header:before {
        content: '';
        display: block;
        width: 40px;
        height: 30px;
        background-image: url("../img/icon-burger-menu.svg");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }
.menu {
        display: none;
    }

    .header:hover:before **???** {
        display: block;
    }

在这种情况下是否可以使用选择器？

enter image description here

Answer 1

我认为最好将汉堡包菜单作为实际元素，而不是伪元素。

伪元素有一些限制。其中之一是您不能在其中添加'：hover'状态。

作为额外的好处，我认为这将是对开发人员更友好的解决方案。如果其他开发人员需要更改您的代码（从现在开始一年），他可以在您的HTML代码中看到菜单。 HTML用于标记，CSS用于样式。

:before和:after通常用于代码的少量添加。不适合导航之类的重要功能。

Answer 2

您可以将:hover添加到伪元素，但是伪元素不会影响它们自己的元素（不适用于CSS）。>>

这里是元素和伪元素悬停状态的可能性的简要概述。

body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 600px;
}

div {
  width: 100px;
  height: 100px;
  background-color: lightgreen;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  cursor: pointer;
}
div:not(.pseudo-hover):hover::before {
  background-color: pink;
}
div.pseudo-hover:hover::before {
  background-color: pink;
}
div.pseudo-hover::before, div.pseudo-hover-all::before {
  pointer-events: initial;
}
div.pseudo-hover-all {
  pointer-events: none;
}
div::before {
  content: '::before';
  position: absolute;
  width: 60%;
  height: 50%;
  background-color: aquamarine;
  top: 0;
  right: -60%;
  cursor: pointer;
  pointer-events: none;
}
<h3>Hover on element affects to pseudo-element</h3>
<div>Element</div>
<h3>Hover on pseudo-element or element affects to pseudo-element</h3>
<div class="pseudo-hover">Element</div>
<h3>Hover on pseudo-element affects only to pseudo-element</h3>
<div class="pseudo-hover-all">Element</div>