Question

我有一个div，里面有一些文字和边框。

<div><span>This is my div</span></div>

当我将鼠标悬停在该div上时，我希望字体为粗体。

div{
    border: 1px solid black;
    display:inline-block;
    padding:20px;
}

span{ 
    padding:20px;

}

div:hover{
    font-weight:bold;
}

这使我的div更宽 - 这会导致烦人的闪烁。

JSFiddle

上的示例

如何解决此问题？

编辑：

div的宽度必须随着内容而增长，而不是随着重量增加。

Answer 1

你的div是inline-block，并且没有明确的宽度，所以它收缩包装内容。字体是proportional font，因此当它变为粗体时，它变得更厚（并占用更多的水平空间）。

为div赋予固定宽度，将其设置为block，或使用等宽字体。

Answer 2

通过使用字母间距我非常接近：

http://jsfiddle.net/thezver/U56R6/1/

<div>Asdf</div>
<div>ab acRsery</div>
<div>abc f</div>
<div>aMdNhjkl</div>
<div>1</div>

的CSS：

div{
    display:inline-block;
    font-family:'Open Sans';
    font-size: 16px;
    padding:5px 10px;
    border:1px solid gray;
    letter-spacing: 0.5px;
}

div:hover{
    font-weight:bold;
    letter-spacing:-0.1px;
}

Answer 3

您可以使用文本阴影模拟粗体效果。这样您就可以

div:hover { 
text-shadow: 0 0 1px black, 0 0 1px black;
}

您可以通过将1px更改为更高或更低的数字来控制效果。您还需要根据文本颜色更改阴影的颜色。在此处查看有关此解决方案的全文： https://www.sitepoint.com/quick-tip-fixing-font-weight-problem-hover-states/

Answer 4

您可以使用固定宽度设置div，并将文本居中对齐以保持整洁

div{
    border: 1px solid black;
    display:inline-block;
    padding:20px;
    width: 150px;
    text-align: center;
}

span{
    padding:20px;
}

div:hover{ 
    font-weight:bold; 
}

Working Example From jsFiddle

希望这有帮助

粗体字体使宽度发生变化

4 个答案: