关于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的使用