1

当我将鼠标悬停在文本上时，文本会移动。文本移动的原因是我删除了悬停时的粗体效果。如何停止文本在悬停时移动？

#menu li a{
    color:#595959;
    font-size:14px;
    font-weight:bold;
    position: relative; 
    overflow:hidden;
    padding:2px 5px;
}

#menu li a:hover{
    color:#FFFFFF;  
    font-weight:normal;
    background-color:#e11d3b;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px; 
    text-decoration:none;   
}
4

3 回答 3

1

似乎可以避免这种情况的唯一方法是设置width固定值。（每个li元素）

如果没有，bold将始终移动您的文本..

于 2013-07-30T07:13:42.083 回答
0

好吧，通过在没有粗体的情况下更短，文本看起来会移动是数学上的，因为它不再具有相同的大小......通过执行以下操作：

#menu li a{
    color:#595959;
    font-size:14px;
    font-weight:bold;
    position: relative; 
    overflow:hidden;
    padding:2px 5px;
    font-size: 25px;
    display: block;
    width: 180px;
    text-align:center;
}

#menu li a:hover{
    color:#FFFFFF;  
    font-weight:normal;
    background-color:#e11d3b;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

您为链接设置宽度，以及显示类型块（例如，它的行为类似于 div）。这样，您可以添加一个 text-align: center; 这将最大限度地减少文本移动的印象。

于 2013-07-30T07:19:28.663 回答
0

将此添加到您的CSS#menu li a:hover{padding:2px 5px 2px 6px;}

演示

于 2013-07-30T07:19:48.900 回答