html – CSS – 悬停时文本移动

发布时间：2020-12-14 23:20:27 所属栏目：资源来源：网络整理

导读：我现在已经在这里待了大约一个小时,似乎无法抓住它. 每当我将鼠标悬停在此文本上时(我想为其悬停一个背景颜色),文本会随着bgcolor一起移动. 这是我得到的： #innerheader ul { list-style:none; margin:0; padding:0; } #innerheader li { display:block; fl

我现在已经在这里待了大约一个小时,似乎无法抓住它.
每当我将鼠标悬停在此文本上时(我想为其悬停一个背景颜色),文本会随着bgcolor一起移动.
这是我得到的：

        #innerheader ul {
            list-style:none;
            margin:0;
            padding:0;
        }
        #innerheader li {
            display:block;
            float:left;
            height:25px;
            margin:0 2px;
            padding:15px 10px 0 10px;
            color:#FFFFFF;
            font-weight:bold;
            font-size:10px;
            text-transform:uppercase;
        }

        #innerheader li a,#innerheader li a:link,#innerheader li a:visited,#innerheader li a:active {
            color:#FFFFFF;
            text-decoration:none;
        }
        #innerheader li a:hover {
            background-color: blue;
            padding: 10px 10px 10px 10px
        }

最佳答案

删除悬停声明中的填充.或者只是在悬停状态之前将填充移动到锚点,如下面的代码所示.

文本移动的原因是锚点上没有填充,然后当你悬停时,就会出现填充.

#innerheader li a,#innerheader li a:active {
        color:#FFFFFF;
        text-decoration:none;
        padding: 10px;
    }
    #innerheader li a:hover {
        background-color: blue;
    }

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!