考慮以下折疊的側(cè)面菜單：.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我需要在鼠標(biāo)懸停在相應(yīng)選項(xiàng) ( ) 上時(shí)顯示標(biāo)題 ( ) menuItem，顯示在折疊選項(xiàng)的右側(cè)。就像是：| AB |
| CD | Option AB | << On hover over CD
| EF |如何使用 CSS/HTML 來(lái)做到這一點(diǎn)？
1 回答
一只名叫tom的貓
TA貢獻(xiàn)1906條經(jīng)驗(yàn) 獲得超3個(gè)贊
您可以像下面這樣調(diào)整您的代碼：
.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 關(guān)注
- 143 瀏覽
添加回答
舉報(bào)
0/150
提交
取消