使用 CSS 停止 div 闪烁
我想仅使用 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 之上。
HUX布斯浏览 97回答 1
1回答
-
茅侃侃
你最好的选择是使用transform: translate(x, y)但是如果你想让 2 个 div 完美重叠，你必须确保你知道以像素为单位的距离。但是，如果两个 div 具有相同的高度，则可以只对第二个 div 执行转换：translateY(-100%)。请记住，如果元素的位置既不是“绝对”也不是“固定”，它将在屏幕中保留空间
随时随地看视频慕课网APP
相关分类
Html5