CSS3实现伪类hover离开时平滑过渡效果示例

由于hover伪类添加的动画效果，仅当鼠标放在元素上时会被触发，而当鼠标离开时，效果会中断，会显得很生硬。

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

由于div元素只有在:hover伪类触发的时候，效果才能加到div元素上。

当鼠标离开div元素的时候，:hover伪类将不再生效，瞬间丢掉hover里写的动画效果。

此时，我们应当在原本元素上再写一个一模一样的transition效果，将离开断掉的动画效果续接上。

此时，不管鼠标在什么时候离开元素，都会原样返回。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。