关于form表单:hover没有修改表单子元素样式
原来在写todolist的时候遇到的一个问题
是关于form表单的hover属性设置背景颜色
想要实现的效果如下：
但是一开始直接给form加hover选择器的时候是这样：
可以看到这样子直接加会使得input和button不会改变背景颜色
但是如果给button input直接添加的效果十分垃圾。。
所以我想到了做ppt的时候，有时候会给图片加上蒙板，修改图片的透明度
实现的效果如下图：
基本可以实现想要的功能
我这个是个小demo 实际使用中可以调整颜色来达到想要的效果
接下来上代码：
css 部分：
.formStyle{
width: 200px;
height: 100px;
position: relative;
}
.divStyle{
width: 200px;
height: 100px;
background-color: aliceblue;
position: absolute;
opacity: 0;
top: 0;
left: 0;
transition: opacity 0.3s ease-in-out;
}
.divStyle:hover{
opacity: 0.71;
} html 部分：#
这里重点的部分就是要给form添加一个字标签div
然后给form设置position:relative , 然后为div设置position: absolute ,并且将其宽高设置为合适的大小
最后调整位置，一般top: 0px, left: 0px,即可
本实例实现关键是opacity和transition的使用
版权声明：本文为azoux原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。