我可以只在悬停时应用 CSS 过渡吗？答案

【问题标题】：Can I apply a CSS transition on hover-out only?我可以只在悬停时应用 CSS 过渡吗？
【发布时间】：2015-03-10 08:03:49
【问题描述】：

如果您将过渡设置如下，CSS 过渡属性可让您在悬停和悬停时都设置动画：

#inner{
    opacity:0;
    transition:opacity 2000ms;
}
#outer:hover #inner{
    opacity:1;
}

但是，如果转换移动到:hover 状态，它只会在悬停时发生。

#inner{
    opacity:0;
}
#outer:hover #inner{
    opacity:1;
    transition:opacity 2000ms;
}

是否可以反过来做，即仅在悬停时设置动画？

【问题讨论】：

【解决方案1】：

这是实现此目的的一种方法（将 ~~bogus 属性~~ none 用于:hover 中的转换属性）：

#inner2{
    opacity:0;
    transition:opacity 2000ms;
}
#outer:hover #inner2{
    opacity:1;
    transition:none;
}

已更新答案以纳入 @BoltClock 的建议。使用none 而不是伪造的属性肯定更优雅。

【讨论】：

虽然这行得通，但更“正确”的做法是使用none 而不是虚假属性。请注意，您可以使用简写的 transition-property: none 或简写的 transition: none 来指定它。

【解决方案2】：

如果您不想多次指定transition 属性，则可以将转换应用于:not(:hover)、but the caveat is that you need to swap all of the other declarations as well：

#inner2{
    opacity:1;
}
#outer:not(:hover) #inner2{
    opacity:0;
    transition:opacity 2000ms;
}

其中任何一个都可以，但如果您不想处理令人困惑的反转，请坚持通过transition: none 覆盖。

还要注意CSS selectors represent states and not events，这意味着它使用:hover 状态而不是mouseover 和mouseout 事件；然而，从:hover 到:not(:hover) 的转换本质上是表示鼠标悬停动画的 CSS 方式。

【讨论】：

【解决方案3】：

我知道这是一篇非常古老的帖子，但由于它是为了响应我在 Google 上对该主题的搜索，我想我会发布我的解决方案。

阅读此处发布的所有内容后，我找到了最简单的解决方案。在初始状态上放置一个转换，如下所示：

.btn {
  opacity:0;
  transition:0.6s;
}

.btn:hover {
  opacity:1;
  transition:0.8s;
}

所以它有一个到悬停状态的过渡时间和一个到非悬停（即正常）状态的过渡时间。节省一大堆代码。

【讨论】：