css加了:hover出现字体乱位

未加:hover
图片说明

加了:hover
图片说明

<!DOCTYPE html>
<html lang="en"><head>
  <meta charset="UTF-8">
  <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        #img{/*背景图*/
            background-image: url(1.jpeg);
        }
        .log{/*文本框*/
            width: 300px;
            height: 40px;
            margin: 15px 10px 10px 10px;/*上 右 下 左,两个文本框的边距*/
            text-indent: 10px;
        }
        .box{/*盒子*/
            width: 399px;
            height: 279px;
            border-radius: 4px;
            border: 5px solid green;
            border-color: transparent;
            padding: 25px;
            margin: 25px;   
            position: absolute;
            left: 780px;
            top: 150px;
            background-color: white;
        }
        .butt{/*登录按钮*/
            width: 300px;
            height: 50px;
            margin: 10px 10px 10px 10px;
            background-color: rgba(134,206,47,1.00);
        }
        a:hover{
            position: absolute;
            left: 368px;
            top: 295px;
            font-size: 15px;
            text-decoration:none;  /*鼠标放上去有下划线*/
        }
    </style>
</head> 

<body id="img">
    <div>
        <div style="text-align: center">
            <h1>欢迎你的到来</h1>

            <div class="box">
                <form action="" method="post">
                    <input type="text" name="ID" placeholder="学号" class="log"><br>
                    <input type="text" name="name" placeholder=" 姓名" class="log"><br>
                    <input type="submit" value="登录" class="butt">
                </form>

                <div>
                    <a href="#">意见反馈</a>
                </div>
            </div>
        </div>



    </div>
</body>
</html>
css

2个回答

加hover的意义在于改变颜色或大小,一般不会改变位置,加hover的css里position,left,top去掉,做这一行要清楚大部分的属性是什么意思。

a:hover中的position: absolute;去掉就好了,如下:

 a:hover{

            left: 368px;
            top: 295px;
            font-size: 15px;
            text-decoration:none;  /*鼠标放上去有下划线*/
        }
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!