Question

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

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

我尝试过很多东西，但似乎没什么用。我尝试了两个单独的div用于菜单按钮和一个箭头居中的隐形框。由于隐形盒使下方的按钮不可点击，因此无法正常工作。我们试图用Z指数来解决这个问题，但这并没有起作用。

我现在试图通过将所有按钮放在同一个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

只需移除相邻的兄弟选择器+（因为您对兄弟姐妹不感兴趣，而是孩子）

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

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

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

使两个重叠的div显示并隐藏在鼠标悬停上

1 个答案: