作者:手机用户2502926887 | 来源:互联网 | 2023-05-27 11:16
如果您将过渡如下所示,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> user4150760..:
下面是实现这一点(把单向bogus
性质 none
的过渡性质:hover
):
#inner2{
opacity:0;
transition:opacity 2000ms;
}
#outer:hover #inner2{
opacity:1;
transition:none;
}
http://jsfiddle.net/j716sbav/4/
答案已更新,以纳入@ BoltClock的建议.把none
一个假的属性,而不是肯定更优雅.
2> BoltClock..:
如果您不想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方式.