html - 使两个重叠的 div 在鼠标悬停时显示和隐藏

Question

当用户将鼠标悬停在屏幕右边缘时，我使用 CSS 和 HTML 来显示和隐藏菜单 div。这就是我想要的:

• 屏幕右侧显示一个箭头。如果用户将鼠标悬停在箭头或围绕它的垂直框上，箭头就会消失，并显示带有四个按钮的菜单。如果用户离开垂直框，四个按钮就会消失，箭头会返回。

我尝试了很多东西，但似乎没有任何效果。我尝试为菜单按钮和箭头居中的不可见框设置两个单独的 div。这不起作用，因为隐形框使下方的按钮无法点击。我们试图用 Z-index 解决这个问题，但没有用。

我现在正尝试通过将所有按钮都放在同一个 div 中但使用不同的类来修复它，这对我不起作用。谁能告诉我哪里出错了？

HTML:

<div id="east-exit">
  <a><i class="communicate-icon fa fa-envelope"></i></a>
  <a><i class="communicate-icon fa fa-comments"></i></a>
  <i class="east-exit-icon fa fa-arrow-right"></i>
  <a><i class="communicate-icon fa fa-phone"></i></a>
  <a><i class="communicate-icon fa fa-camera"></i></a>
</div>

CSS:

#east-exit {
  display: flex;
  z-index: -1;
  align-items: stretch;
  justify-content: space-around;
  flex-direction: column;
  position: absolute;
  right: 0;
  height: 100%;
  width: 85px;
  font-size: 60px;
}

.east-exit-icon {
  opacity: 0.1;
}

.communicate-icon {
  display: none;
}

#east-exit:hover + .communicate-icon {
  display: flex;
}

#east-exit:hover + .east-exit-icon {
  display: none;
}

http://jsfiddle.net/804jeg82/453/

Answer 1

只需删除相邻的同级选择器 +(因为您对同级不感兴趣，而对 child 感兴趣)

#east-exit:hover .communicate-icon {
  display: flex;
}

#east-exit:hover .east-exit-icon {
  display: none;
}

http://jsfiddle.net/804jeg82/454/