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

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 {

  width: 40px;

  background-color: grey;

  color: white;

  font-size: 12px;

  position: relative;

}

.menuItem {

  text-align: center;

  padding: 8px;

}

.menuTitle {

  position: absolute;

  left:100%;

  white-space:nowrap;

  transform:translateY(-100%);

  display:none;

  padding: 8px;

  background-color: blue;

  color: grey;

}

.menuItem:hover + .menuTitle,

.menuTitle:hover{

  display:block;

}

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