Question

我需要根据伪元素的悬停状态更改元素。这是我得到的，但它不起作用：

nav .logo {
  display: none;
}
nav:before{}
nav:hover:before .logo {
  display: block;
}

如果我将鼠标悬停在之前的＆＃34;元素＆＃34;上，则应显示div。谢谢你的帮助！

Answer 1

你不能。

您正在尝试选择类.logo的元素，该元素是nav元素的:before伪元素的后代。

它不起作用，因为.logo不是后代。此外，伪元素不能包含子元素。

但是，您可以选择伪元素的兄弟元素。但是，除非您更改了标记，否则这将无效。

例如：

nav:hover:before + .logo {
  display: block;
}

..但这显然不是你想要达到的目标。

Answer 2

感谢您的帮助！

我想要使用伪元素，但不幸的是，最好选择＆＃34;真实＆＃34; HTML元素。我的标记看起来像这样：

<nav class="header-nav">
    <div class="menu-header-menue-container">
        <ul id="menu-header-menue" class="menu">
            <li>Lorem</li>
            <li>Ipsum</li>
        </ul>
    </div>
</nav>

我的（S）CSS：

div {
  position: absolute;
  top: -55px;
  right: 0;
  width: 30px;
  height: 30px;
  background: url(http://placehold.it/30x30);

  ul {
    display: none;
  }

  &:hover {
    ul {
      display: block;
    }
  }
}

根据悬停在伪元素上更改元素

2 个答案: