我可以仅在悬停时应用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的过渡性质:hover):

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

答案已更新,以纳入@ BoltClock的建议.把none一个假的属性,而不是肯定更优雅.

虽然这是有效的，但更“正确”的方法是使用 `none` 而不是伪造的属性。请注意，您可以使用简写的 `transition-property: none` 或简写的 `transition: none` 来指定它。 (2认同)

Answer 2

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

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

这些中的任何一个都可以工作,但是如果你不想处理令人困惑的倒置,那么坚持使用overriding via transition: none.

另请注意,CSS选择器表示状态而不是事件,这意味着它使用:hover状态而不是mouseover和mouseout事件; 然而,从过渡:hover到:not(:hover)本质上是表达鼠标移动动画的CSS方式.