考虑以下折叠的侧面菜单：.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 来做到这一点？
1 回答
一只名叫tom的猫
TA贡献1906条经验 获得超2个赞
您可以像下面这样调整您的代码：
.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>
- 1 回答
- 0 关注
- 53 浏览
添加回答
举报
0/150
提交
取消