考慮以下折疊的側面菜單：.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條經驗 獲得超3個贊
您可以像下面這樣調整您的代碼：
.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 關注
- 131 瀏覽
添加回答
舉報
0/150
提交
取消