我想僅使用 CSS 在將鼠標懸停在鼠標上時在一定時間間隔后在同一位置顯示兩個 div。.showme{ opacity:0; transition-property:opacity; transition-delay:1s; } .showhim:hover .showme{ opacity:1; transition-property:opacity; transition-delay:1s; } .showhim:hover .ok{ opacity:0; transition-property:opacity; transition-delay:1s; }<html> <head> <title>HI</title> </head> <body> <div> <div class="showhim"> HOVER ME <div class="showme">hai</div> <div class="ok">ok</div> </div> </div> </body> </html>問題是隱藏的 div 甚至占用了 DOM 中的空間。但我想將 div 重疊并在懸停時依次顯示。使用“顯示”屬性而不是“不透明度”，但它與過渡效果不佳。我不想使用position:absolute 將第二個div 置于另一個div 之上。
1 回答
茅侃侃
TA貢獻1842條經驗 獲得超21個贊
你最好的選擇是使用transform: translate(x, y)
但是如果你想讓 2 個 div 完美重疊，你必須確保你知道以像素為單位的距離。
但是，如果兩個 div 具有相同的高度，則可以只對第二個 div 執行轉換：translateY(-100%)。
請記住，如果元素的位置既不是“絕對”也不是“固定”，它將在屏幕中保留空間
- 1 回答
- 0 關注
- 127 瀏覽
添加回答
舉報
0/150
提交
取消