1、CSS样式如下
.button:hover {
border: 1px solid #409eff;
/* color: #fff; */
background: hsla(0,0%,97.3%,0.3);
-webkit-transition: all .5s;
transition: all .5s;
}
2、解析
按钮本身存在背景颜色,上述代码中的background: hsla(0,0%,97.3%,0.3);实现了鼠标移上去后背景颜色变透明,可以改变数值大小来修改透明程度
上述代码中的 transition: all .5s;设置了hover效果的过渡时间为0.5秒,all表示所有属性
3、完结。