hover伪类实现动画效果及使用注意事项

[北极光LG]

hover伪类实现动画效果及使用注意事项

开发工具与关键技术：DW，hover伪类的使用

作者：易金亮

撰写时间：2019.01.16

在网页制作过程中，我们经常会用到hover伪类，下面我就说几种用hover伪类实现的动画效果，首先看一下我在使用hover伪类之前的效果，如下截图：

而当我给它设置hover伪类后，鼠标移上去就会出现缩放的动画效果，其效果如下截图：

这就是通过hover伪类实现的动画效果之一，其实现代码为下

.top ul li{
 transition: all 0.5s;
}
.top ul li:hover{
 transform: scale(0.7);
}

先通过transition属性给它设置动画运动时间，再通过hover实现动画效果，如以上代码所示，当scale值小于1时出现缩小的动画效果，当scale值大于1时则出现放大的动画效果。
当然，也可以直接通过hover伪类给某个元素设置不同于它本身的宽高，例如下面这个效果我就是直接通过hover伪类设置宽高而实现的动画效果，如下截图：


这样当鼠标移上去时图片就会缩小到我用hover伪类设置的宽高，然后把下面隐藏的文字显示出来，这样就显得比较美观。其实现代码如下：

.cont img{
 
 transition:all 0.3s;
}
.cont:hover img{
 width:100px;
 height:100px;
}

这样就能实现比较美观的动画效果了，不过在使用hover伪类时也要注意一些小的细节哦，比如我就被一个小的细节问题困扰了好久，如下图：

在使用hover时前面不能有空格，如果出现空格，它就会失效，而且不会报错，而有些其它的出现空格就会报错，如下：