我有一些单词，例如 WORD 和 REALLYLONGWORD。两者都有浅色字体，我希望它们在鼠标悬停时变得粗体。两者都有 float: left;宽度:自动；。我不能给它们固定宽度。
问题是，当我将 WORD 悬停时，REALLYLONGWORD 会跳到右边，因为 WORD 字体变粗(宽度值也变大)。是否有任何仅 CSS 的解决方法？
编辑(我无法回答我自己的问题，所以我在下面发布答案): 我找到了一些纯 CSS 解决方案。 HTML:
<div class="thtitled-thtitle"><div class="thtitles-title">WORD</div><div class="thtitles-titlebold">WORD</div></div>
<div class="thtitled-thtitle"><div class="thtitles-title">REALLYLONGWORD</div><div class="thtitles-titlebold">REALLYLONGWORD</div></div>
CSS:
.thtitled-thtitle { float: left; }
.thtitles-titlebold { visibility: hidden; color: #F5F5F5; cursor: pointer; float: left; font-family: 'BOLDFONT',Arial,sans-serif; font-size: 72px; line-height: 96px; min-height: 100px; text-transform: uppercase; width: auto; word-wrap: break-word; }
.thtitles-title { color: #F5F5F5; cursor: pointer; font-family: 'LIGHTFONT',Arial,sans-serif; font-size: 72px; line-height: 96px; min-height: 100px; text-transform: uppercase; width: auto; word-wrap: break-word; position: absolute; }
.thtitles-title:hover { font-family: 'BOLDFONT',Arial,sans-serif; }
基本上，我再创建一个带有 BOLD 字体(其宽度为主要宽度)的隐藏容器，并将 LIGHT 字体放入其中。悬停后它仍然具有粗体字的宽度，因此没有跳跃。
最佳答案
你根本不想给字体添加任何宽度，我建议你完全删除 width 属性。 (我也希望你注意到你的css中的书写错误，with应该是width)
接下来是为 ahref 分配一个类，这可以使用 SPAN 标签轻松完成
在 css 中完成后，只需执行以下操作: .firSTLinkclass{ 字体粗细:粗体；
关于html - 悬停后如何保持字宽(悬停时字体从浅色变为粗体)？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10043252/