Question

我有一些像WORD和REALLYLONGWORD这样的词。两者都有轻字体，我希望它们在鼠标悬停时变为粗体。两者都有float: left; width: auto;。我不能给他们固定的宽度。

问题是当我悬停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字体放入其中。悬停后它的宽度仍为BOLD字，因此没有跳跃。

Answer 1

使用字母间距。例如{letter-spacing:0.04em}

如果您使用足够的字母间距设置WORD的样式，使其与粗体相同的单词的宽度相同，并在粗体时删除字母间距，则其他所有内容都将保留。

它有效 - 尝试这个（这只是演示概念 - 而不是我推荐的制作）：

<b>Rotterdam</b><br>
<span style="letter-spacing:0.04em">Rotterdam</span><br/>
<b>and</b><br>
<span style="letter-spacing:0.04em">and</span><br/>
<b>Oslo</b><br>
<span style="letter-spacing:0.04em">Oslo</span><br/>
<b>letter</b><br>
<span style="letter-spacing:0.04em">letter</span><br/>

Answer 2

您根本不想为字体添加任何宽度，我建议您完全删除width属性。（我也希望你注意到你的css写的错误，应该是宽度）

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

一旦在css中完成就行了： .firstlinkclass { font-weight：bold; }

Answer 3

我知道很久很久以前就问过了这个问题，但是我想出了一个解决问题的解决办法来解决跳跃问题，所以我想我会分享。

不要在悬停时使字体变为粗体，而是使其具有文本阴影。没有跳跃，相同的效果，一行CSS。

如何在悬停后保持字宽（悬停时字体从浅变为粗体）？

3 个答案: