我可以仅在悬停时应用CSS转换吗？

Question

CSS过渡属性可让您在悬停和＆amp ;;如果您将转换设置如下，则将鼠标悬停：

#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属性 :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

我知道这是一篇非常古老的文章，但是由于它是针对我对此主题的Google搜索而提出的，所以我认为我应该发布解决方案。

在阅读这里发布的所有内容之后，我找到了最简单的解决方案。将过渡放在初始状态，如下所示：

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

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

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