Question

所以我在悬停时进行了这种转换，这会在正在悬停的元素底部形成一个边框。一切都很好，但是当鼠标离开元素时，边框就会消失，而我希望它能够缩回＆＃34;再次回来。 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

Answer 1

转换会自动在两个方向上进行。

您遇到的问题是border-style不是可以设置动画的属性，因此会立即更改。

这意味着当您将其悬停时，它会立即变为solid，然后花费时间成为5px。

但是当你取消它时，它立即变为none，你看不到宽度动画。

使默认（非悬停）状态显式化，以便{/ 1}}是您悬停它时唯一会发生变化的事情。

添加：

border-width

到border-bottom: 0px solid white;的规则。

Answer 2

将border-bottom: 0px solid white添加到p。 Css想知道在哪里过渡回来！：d

Answer 3

for transition将animate类添加到要转换的元素

.animate 
 { 
  transition: all .5s;
  -moz-transition: all .5s;
  -webkit-transition: all .5s;
  -o-transition: all .5s;
  -ms-transition: all .5s;
 }

现在，当您将此类添加到元素时，它将在悬停和悬停时进行转换。

Answer 4

我不知道这是否有帮助，但就我而言，我只是这样：

结束：

.<nameOfClass>:hover{
 transition: width 0.4s ease-in-out;
}

没有结束：

.<nameOfClass>:not(:hover){
 transition: width 0.4s ease-in-out;
}

如何使CSS过渡工作＆＃34;向后＆＃34;？

4 个答案: