如何使用伪悬停

这次我将向您展示如何使用伪悬停。使用伪悬停有哪些注意事项？这是一个实际案例，我们来看一下。

由于hover伪类添加的动画效果，只有当鼠标放在元素上时才会触发。当鼠标离开时，效果就会中断，会显得很僵硬。

大多数人的想法是利用js的onmouseover和onmouseleave事件来实现动画效果。其实不用那么麻烦，CSS3可以帮你解决这些问题。







离开后效果就钝了

p{
宽度：100px；
高度：100px；
边框：1px实线；

边距：0px 自动；
顶部边距：200px；

p：悬停{
变换：缩放（2）；
过渡：全1s线性；

登录后复制

因为p元素只有在触发:hover伪类时才能添加到p元素中。

当鼠标离开p元素时，:hover伪类将不再生效，hover中写的动画效果将立即丢失。

这时候我们就应该在原来的元素上写一个一模一样的过渡效果来继续中断的动画效果。







简单的解决方案

p{宽度：100px；
高度：100px；
边框：1px实线；
边距：0px 自动；
顶部边距：200px；
/* 向原始元素添加过渡 */
过渡：全1s线性；
}
p：悬停{
变换：缩放（2）；
过渡：全1s线性；
}

登录后复制

此时，无论鼠标何时离开元素，都会原样返回。

相信看完本文的案例你已经掌握了方法。更多精彩资讯请关注其他相关文章！