一种复杂的标题，但足够容易演示
#txt {
padding: 5px;
}
#txt:hover {
font-weight: bold;
}
#test {
display: inline-block;
border: solid 1px black;
min-width: 100px;
}<div id="test">
<div id="txt">This is some text</div>
</div>所以我有以上情况。
我有什么用CSS可以做的事情，当我将鼠标悬停在文本上时，可以避免调整容器（测试）的大小？就像占用调整大小的边距或边距。或设置宽度，使其足以处理加粗的文本（但仍是动态的）。
这是一个想法，请使用before和after属性根据粗体文本的宽度来调整元素的大小。不幸的是，这需要更改您的标记。
#txt {
line-height: 1.4em;
padding: 5px;
text-align: center;
}
#txt::before {
content: attr(data-content);
display: block;
font-weight: bold;
height: 0px;
visibility: hidden;
}
#txt::after {
content: attr(data-content);
font-weight: normal;
}
#txt:hover::after {
font-weight: bold;
}
#test {
display: inline-block;
border: solid 1px black;
min-width: 100px;
}<div id="test">
<div id="txt" data-content="This is some text"></div>
</div>或者，使用文本阴影将文本加粗。
#txt {
padding: 5px;
}
#txt:hover {
text-shadow: 0.5px 0px 0px #555, -0.5px 0px 0px #555;
}
#test {
display: inline-block;
border: solid 1px black;
min-width: 100px;
}<div id="test">
<div id="txt">This is some text</div>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句