解决添加盒子边框hover效果时的抖动

最新推荐文章于 2023-11-09 14:28:17 发布

Miketutu

最新推荐文章于 2023-11-09 14:28:17 发布

阅读量313

点赞数

文章标签：前端 html css Powered by 金山文档

本文链接：https://blog.csdn.net/Miketutu/article/details/129335478

版权

在创建登录界面时，遇到一个问题：当鼠标悬停在input输入框上添加边框时，边框会变动。解决方案是给包含input的外层div添加一个透明边框。在HTML中，将input包裹在class为writeMsg的div内，然后在CSS中设置该div的透明边框。当hover时，只改变边框颜色，避免了边框尺寸的变化。

摘要由CSDN通过智能技术生成

当在做登录界面的input框的CSS样式时发现，给input框添加hover伪类来添加边框。当把鼠标放到input输入框时，边框实现了添加，但是发生了变动。

解决方案：

给包含input的盒子添加边框并且设置颜色为transparent。这样问题就得到了解决。

HTML代码解构：

<div class="writeMsg">
                <span><img src="../assets/images/phone.png" alt=""></span>
                <input type="number" placeholder="请输入手机号" v-model="phoneNumber" />
            </div>

CSS代码：

.writeMsg{
          box-sizing: border-box;
            width: 100%;
            display: flex;
            border: 1px solid transparent;
            span{
                flex-grow: 0;
                img{
                    width: 40px;
                    height: 40px;
                }
            }
            input{
                padding-left: 6px;
                font-size: 14px;
                flex-grow: 8;
                height: 40px;
                outline: none;
                border: none;
            }
            &:hover{
              border: 1px solid #ff0036;
            } 
        }

实现效果：