html+css实现鼠标移上去背景颜色变透明

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、完结。