shaokel 2019-07-30 20:51 采纳率: 95.2%
浏览 799
已采纳

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>
  • 写回答

2条回答

  • zepcjsj0801 2019-07-30 21:34
    关注

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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

悬赏问题

  • ¥15 drone 推送镜像时候 purge: true 推送完毕后没有删除对应的镜像,手动拷贝到服务器执行结果正确在样才能让指令自动执行成功删除对应镜像，如何解决？
  • ¥15 求daily translation（DT）偏差订正方法的代码
  • ¥15 js调用html页面需要隐藏某个按钮
  • ¥15 ads仿真结果在圆图上是怎么读数的
  • ¥20 Cotex M3的调试和程序执行方式是什么样的？
  • ¥20 java项目连接sqlserver时报ssl相关错误
  • ¥15 一道python难题3
  • ¥15 牛顿斯科特系数表表示
  • ¥15 arduino 步进电机
  • ¥20 程序进入HardFault_Handler