在將其標記為重復之前,請閱讀以下內容:我有一個具有絕對位置的選單(容器),溢位-y 設定為滾動,溢位-x 被隱藏。當您將滑鼠懸停在選單的某些部分上時,我也有工具提示,其中一些溢位選單。由于某種原因,工具提示永遠不會顯示在容器之外,我嘗試過絕對位置和 z-index,甚至溢位-x:可見。這些都不起作用。例如:
CSS:
.menu {
position: absolute;
top: 20px;
left: 20px;
width: 100px;
height: 100px;
background-color: gray;
overflow-y: scroll;
overflow-x: visible;
}
.tooltip {
position: absolute;
left: -5px;
top: 0;
width: 10px;
height: 10px;
background-color: black;
}
<div class='menu'>
<div class='tooltip'></div>
</div>
.tooltip {
position:absolute;
left:-5px;
top:0;
width:10px;
height:10px;
background-color:black;
}
HTML:
<div class='menu'>
<div class='tooltip'></div>
</div>
并且工具提示 div 永遠不會顯示在選單之外。我無法更改選單或工具提示上的位置,因為它們需要相對于任何其他工具提示和選單。我有這個游戲的作業 jsfiddle:https ://jsfiddle.net/fm6zrtuq/ 你需要做的就是按下右上角的齒輪圖示并將滑鼠懸停在帶有獎杯的圖示上,你可以看到我的真正意思。
uj5u.com熱心網友回復:
據我了解,您想要實作這樣的目標:
.menu {
position: relative;
top: 20px;
left: 20px;
width: 100px;
height: 100px;
background-color: gray;
}
.menu:hover .tooltip {
left: 5px;
}
.tooltip {
position: absolute;
left: -5px;
top: 0;
width: 10px;
height: 10px;
background-color: black;
transition: .5s;
}
<div class='menu'>
<div class='tooltip'></div>
</div>
轉載請註明出處,本文鏈接:https://www.uj5u.com/ruanti/530743.html
標籤:htmlcss
上一篇:在div的中心對齊文本和圖示
下一篇:聯系表格輸入影片錯誤
