html - 悬停后如何保持字宽(悬停时字体从浅色变为粗体)？

Question

我有一些单词，例如 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 字体放入其中。悬停后它仍然具有粗体字的宽度，因此没有跳跃。

Answer 1

你根本不想给字体添加任何宽度，我建议你完全删除 width 属性。 (我也希望你注意到你的css中的书写错误，with应该是width)

接下来是为 ahref 分配一个类，这可以使用 SPAN 标签轻松完成

在 css 中完成后，只需执行以下操作: .firSTLinkclass{ 字体粗细:粗体；