我想仅使用 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 关注
- 93 浏览
添加回答
举报
0/150
提交
取消