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

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 【急】在线问答CNC雕刻机的电子电路与编程
  • ¥60 在mc68335芯片上移植ucos ii 的成功工程文件
  • ¥15 笔记本外接显示器正常，但是笔记本屏幕黑屏
  • ¥15 Python pandas
  • ¥15 蓝牙硬件，可以用哪几种方法控制手机点击和滑动
  • ¥15 生物医学数据分析。基础课程就v经常唱课程舅成牛逼
  • ¥15 云环境云开发云函数对接微信商户中的分账功能
  • ¥15 空间转录组CRAD遇到问题
  • ¥20 materialstudio计算氢键脚本问题
  • ¥15 有没有代做有偿主要做数据可视化部分即可（2023全国高考更省一本线理科类）