关于form表单:hover没有修改表单子元素样式

Posted 2020-11-26 azoux

原来在写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的使用

以上是关于关于form表单:hover没有修改表单子元素样式的主要内容，如果未能解决你的问题，请参考以下文章

表单和变形

Form表单的子元素

layui动态修改表单form内容

form的jquery对象调用find方法找不到任何子元素

关于表单修改

表单自定义样式