Question

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

#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;   
}

Answer 1

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

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

Answer 2

嗯，通过缩短没有粗体，文本看似移动是数学的，因为它不再具有相同的大小...... 做类似的事情：

#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;这将最大限度地减少文本移动的印象。

Answer 3

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

Demo

菜单文本在悬停时移动

3 个答案: