鼠标悬浮鼠标离开的时候变化太快的解决方案

其实对于鼠标悬浮这个效果是我们很常用的一个特效，可是我们每次在添加一个鼠标悬浮，比如背景颜色变化的时候，我们在让鼠标进入的时候，缓慢变化，出来的时候也是缓慢变化，而不是骤变这种，体验太差，最开始是这样的：

<style type="text/css">
 a{
 padding:30px 50px;
 background: red;
 text-decoration: none;
 }
 a:hover{
 padding:30px 50px;
 background: blue;
 transition: 1s ease;
 }
</style>

<div>
 <a href="#" title="">egei9bner</a>
</div>

这样的话，悬浮上去的时候变化确实是缓慢变化，持续时间1s，可是离开的时候就不是了，解决很简单，把那个transition用在a标签上面，而不是伪类上面。正确的应该是：

<style type="text/css">
 a{
 padding:30px 50px;
 background: red;
 text-decoration: none;
 transition: 1s ease;
 }
 a:hover{
 padding:30px 50px;
 background: blue;
 }
</style>

<div>
 <a href="#" title="">egei9bner</a>
</div>

这样无论是进入阶段还是离开阶段，都是缓慢变化的。

未经允许不得转载：哈勃私语 » 鼠标悬浮鼠标离开的时候变化太快的解决方案