我可以仅在悬停时应用 CSS 过渡吗?

Question

CSS过渡属性允许您在悬停和悬停时进行动画处理，前提是将过渡放进和悬停如下：

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

但是，如果将转换移动到:hover状态，则仅在悬停时发生。

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

是否可以做相反的事情，即仅在悬停时制作动画？

Answer 1

这是实现此目的的一种方法（在 :hover 中为过渡属性放置一个bogus属性none）：

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

http://jsfiddle.net/j716sbav/4/

答案已更新，以纳入@BoltClock的建议。放none而不是虚假的属性肯定更优雅。

Answer 2

如果您不想多次指定 transition 属性，则可以将转换应用于 :not(:hover) ，但需要注意的是，您还需要交换所有其他声明：

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

这两种方法都可以，但是如果您不想处理令人困惑的反转，请坚持通过transition: none覆盖。

另请注意，CSS 选择器表示状态而不是事件，这意味着它使用:hover状态而不是鼠标悬停和鼠标退出事件;但是，从 :hover 到 :not(:hover) 的过渡本质上是表达鼠标退出动画的 CSS 方式。

Answer 3

我知道这是一个非常古老的帖子，但是，当它回应我对这个主题的谷歌搜索时，我想我会发布我的解决方案。

阅读了此处发布的所有内容后，我找到了最简单的解决方案。按如下方式对初始状态进行转换：

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

因此，它有一个到悬停状态的过渡时间和到非悬停（即正常）状态的过渡时间。保存一大堆代码。