css:hover:after 在另一个元素上

Question

我仍然在努力让 css:hover 应用于页面上的另一个元素。

将鼠标悬停在菜单元素('.sub-menu')上时，我希望在页面内容('.overlay')上显示一个灰色覆盖层。那么我该怎么做才能让 .sub-menu:hover 导致 .overlay 出现呢？

问题是，html 彼此并不接近。尽管 .sub-menu 确实出现在 .overlay 之前，所以它的顺序是正确的。

我做了这样的覆盖:

.overlay {
  position: relative;
}

.overlay:after {
  position: absolute;
  content:"";
  top:0;
  left:0;
  width:100%;
  height:100%;
  opacity:0;
  background: grey;
  transition: 0.2s;
}

.overlay:hover:after  {
  opacity: 0.9;
}

Answer 1

您可以使用独立于页面内容的叠加层，定位为菜单之后的同级元素，以便您可以使用 ~ 通用同级组合器引用它，然后将该叠加层定位为固定的 height:100vh width:100vw，考虑到正确的 Z 索引。

.overlay {
  position: fixed;
  top:0; left:0;
  z-index:10;
  width:100vw;
  height:100vh;
  opacity:0;
  background: grey;
  transition: 0.2s;
}

.menu{
  position:relative;
  z-index:20
}

.menu:hover ~ .overlay {
  opacity: 0.9;
}

<button class="menu">hover me!</button>
<div class="overlay"></div>

<h1>some content</h1>
<p> "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>

编辑:由于添加元素不是一种选择，您可以使用伪元素。这里重要的是你需要将 :hover::before 设置为 pointer-events:none;否则，当您移出按钮时，叠加层不会消失。

.menu{
  position:relative;
}

.menu::before {
  content:"";
  position: fixed;
  top:0; left:0;
  z-index:-1;
  width:100vw;
  height:100vh;
  background: grey;
  transition: 0.2s;
  display:none;
}


.menu:hover::before {
  z-index:-1;
  opacity:0.9;
  display:block;
  pointer-events:none;
}

<button class="menu">hover me!</button>
<h1>some content</h1>

<p> "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>