所以我在悬停时有这个过渡,它在悬停元素的底部形成了一个边框。那里一切都很好,但是当鼠标离开元素时,边框就会消失,而我希望它再次“缩回”。 Codepen
HTML:
<div class="object">
<p>Object</p>
</div>
CSS:
* {
background-color: #222;
color: white;
font-family: sans-serif;
font-size: 30pt;
}
p {
width: 200px;
height: 100%;
margin-top: 70px;
text-align: center;
transition: 0.2s border-bottom;
-webkit-transition: 0.2s border-bottom;
margin: auto;
margin-top: 50px;
}
p:hover {
border-bottom: 5px solid white;
}
我将如何着手做这件事,尽可能简单? 谢谢;3
最佳答案
转换自动在两个方向上工作。
您遇到的问题是 border-style
不是可以设置动画的属性,因此它会立即更改。
这意味着当您悬停它时,它会立即变成solid
,然后花时间变成5px
。
但是当您取消悬停它时,它立即变为 none
并且您看不到宽度动画。
使默认(非悬停)状态明确,以便 border-width
是唯一在您悬停时发生变化的东西。
添加:
border-bottom: 0px solid white;
p
的规则。
关于html - 如何使 CSS 转换工作 "backwards"?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29758957/