我可以仅在悬停时应用 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

这是实现此目的的一种方法（将 ~~bogus 属性~~ none 用于过渡属性 in :hover):

#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)、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 表达鼠标移出动画的方式。

Answer 3

我知道这是一个非常古老的 post 但是，当它出现在我对这个主题的 Google 搜索的回应中时，我想我会 post 我的解决方案。

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

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

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

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

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

Can I apply a CSS transition on hover-out only?

css

hover

css-transitions