悬停过渡 css

Posted 2023-03-06

【中文标题】悬停过渡 css

【英文标题】：Hover off transition css

【发布时间】：2018-01-22 21:25:42

【问题描述】：

这个问题可能很明显，但我是 CSS 新手。

我正在为一个形状设置动画，因此当您将其悬停时，它会拉伸。我已经完成了一个很好的轻松过渡的悬停，但是当你离开鼠标时，过渡不起作用。有没有办法让它在悬停时刻也发生？

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


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

【参考方案1】：

你的答案

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

.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 */

【参考方案2】：

在:hover 之前添加过渡，因此过渡始终适用

.shape1 transition: 0.2s ease;

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

【参考方案3】：

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