如何在折叠菜单旁边实现悬停提示

Question

考虑以下折叠的侧面菜单：

.collapsedSideMenu {

  height: 100%;

  width: 40px;

  background-color: grey;

  color: white;

  font-size: 12px;

  margin: 0px;

  padding: 0px;

}

.menuItem {

  display: flex;

  justify-content: center;

  padding: 8px;

  position: relative;

}

.menuItem:hover {

  background-color: blue;

  color: grey;

}

.menuTitle {

  position: absolute;

  display: flex;

  justify-content: center;

  padding: 8px;

  background-color: blue;

  color: grey;

}

<div class="collapsedSideMenu">

  <div class="menuItem">AB</div>

  <div class="menuTitle">Option AB</div>

  <div class="menuItem">CD</div>

  <div class="menuTitle">Option CD</div>

  <div class="menuItem">EF</div>

  <div class="menuTitle">Option EF</div>

</div>

menuTitle我需要在鼠标悬停在相应选项 ( ) 上时显示标题 ( ) menuItem，显示在折叠选项的右侧。

就像是：

| AB |
| CD | Option AB | << On hover over CD
| EF |

如何使用 CSS/HTML 来做到这一点？

Answer 1

您可以像下面这样调整您的代码：.collapsedSideMenu {&nbsp; width: 40px;&nbsp; background-color: grey;&nbsp; color: white;&nbsp; font-size: 12px;&nbsp; position: relative;}.menuItem {&nbsp; text-align: center;&nbsp; padding: 8px;}.menuTitle {&nbsp; position: absolute;&nbsp; left:100%;&nbsp; white-space:nowrap;&nbsp; transform:translateY(-100%);&nbsp; display:none;&nbsp; padding: 8px;&nbsp; background-color: blue;&nbsp; color: grey;}.menuItem:hover + .menuTitle,.menuTitle:hover{&nbsp; display:block;}<div class="collapsedSideMenu">&nbsp; <div class="menuItem">AB</div>&nbsp; <div class="menuTitle">Option AB</div>&nbsp; <div class="menuItem">CD</div>&nbsp; <div class="menuTitle">Option CD</div>&nbsp; <div class="menuItem">EF</div>&nbsp; <div class="menuTitle">Option EF</div></div>