Question

这个问题可能很明显，但我在css中是新的。

我动画一个形状，所以当你将它悬停时，它会伸展。我已经完成了悬停，但是当你离开鼠标时，过渡不起作用。还有一种方法可以在悬停时刻实现它吗？

.shape1{
position: absolute;
background:red
top:512px;
width:180px;
height:140px;
}

.shape1:hover {
height: 160px;
top:492px;
transition: 0.2s ease;
}

Answer 1

在:hover之前添加转换，因此转换始终适用

.shape1 { transition: 0.2s ease; }

:hover选择器用于在鼠标悬停时选择元素。 W3Schools

Answer 2

你的回答

您已在元素的悬停状态中添加了transition属性。因此，当您从元素中离开transition时，不会应用cursor。

.shape1{
    position: absolute;
    background: red;
    top: 512px;
    width: 180px;
    height: 140px;
    transition: .2s ease; /* move this here from :hover */
}

更多信息

除此之外，您还可以向transition添加特定属性。例如，如果您只想要对动画高度进行动画处理，则可以这样：

.shape1 {
    transition: height .2s ease;
    /* this inly affects height, nothing else */
}

您甚至可以为每个属性定义不同的转换时间：

.shape1 {
    transition: height .2s ease, background-color .5s linear;
    /* stacking transitions is easy */
}

Answer 3

当你也将过渡添加到你的shape1类时，它应该可以正常工作

悬停过渡css

3 个答案:

你的回答

更多信息