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

Stack Overflow用户

提问于 2019-12-17 23:56:50

回答 2查看 55关注 0票数 0

我用假元素做了汉堡菜单。现在我需要显示一个菜单，如果一个伪元素是悬停的.我可以这样选择:.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;
    }

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

在这里输入图像描述

html

css

css-selectors

hover

pseudo-element

语音识别特惠，低至14.9元！

提供业界非常具有性价比的语音识别服务，超高识别准确率，适用多场景

回答 2

Stack Overflow用户

发布于 2019-12-18 01:00:19

我认为最好是把你的汉堡包菜单作为一个实际的元素，而不是一个伪元素。

伪元素有一定的局限性。其中之一是，您不能添加‘：悬停’状态到他们。

作为一个额外的奖励，我认为这将是一个更有利于开发的解决方案。如果另一个开发人员需要修改您的代码(一年后)，他可以在您的HTML代码中看到菜单。HTML用于标记，CSS用于样式设计。

:before和:after通常用于对代码进行少量的添加。对于像导航这样重要的部分来说不是。

票数 2

Stack Overflow用户

发布于 2019-12-18 01:16:31

您可以将: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>