CSS - 悬停时文本移动答案

【问题标题】：CSS - Text moves when hoveringCSS - 悬停时文本移动
【发布时间】：2012-01-19 00:07:05
【问题描述】：

我已经玩了大约一个小时了，似乎无法抓住它。
每次我将鼠标悬停在此文本上（我想为其悬停设置背景颜色）时，文本都会与 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
        }

【问题讨论】：

使用 CSS 重置为您省去更多麻烦。

标签： html css hover move

【解决方案1】：

删除悬停声明中的填充。或者简单地将填充移动到悬停状态之前的锚点，如下面的代码。

文本移动的原因是锚点上没有填充，然后当您悬停时，有填充。

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

【讨论】：

为什么下面的例子（第三个例子）中的文字没有随着悬停移动呢？我尝试了类似的东西，我的文字移动了。 codepen.io/Calloumi/pen/vndlH

【解决方案2】：

这是因为填充。删除它就可以正常工作了。

【讨论】：

【解决方案3】：

去掉填充，这是导致它移动的原因。

【讨论】：

【解决方案4】：

它正在移动，因为您正在更改悬停块中的填充。删除它应该没问题。

【讨论】：

【解决方案5】：

你在 li a:hover 上添加了填充！当然，它会改变文本。要解决此问题，您需要定义宽度和高度，并通过悬停时的填充量来减少它们。或将填充移动到非悬停状态。

【讨论】：

嗨凯：那么为什么下面示例（第三个示例）中的文本不随悬停移动？我尝试了类似的东西，我的文字移动了。 codepen.io/Calloumi/pen/vndlH