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

您可以使用独立于页面内容的叠加层，在菜单后面定位为兄弟，以便您可以使用~一般同级组合器引用它，然后将该叠加层定位为固定{{1} } height:100vh，考虑正确的Z索引。

＆＃13;

width:100vw

＆＃13;

.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;
}

＆＃13;

编辑：由于添加元素不是一个选项，您可以使用伪元素。这里重要的是你需要设置：hover :: before到pointer-events：none;当你离开按钮时，叠加层不会消失。

＆＃13;

<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>

＆＃13;

.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;
}

＆＃13;

css：悬停：在另一个元素之后

1 个答案: