html - 我应该为一个元素使用什么选择器，这取决于伪元素的悬停行为？

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 通常用于对代码进行少量添加。不适用于导航等重要部分。