2

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

4

3 回答 3

0

使用字母间距。例如{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/>
于 2012-04-06T12:08:34.850 回答
0

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

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

一旦在 css 中完成，只需执行以下操作： .firstlinkclass{ font-weight: bold; }

于 2012-04-06T12:13:03.230 回答
0

我知道很久以前有人问过这个问题，但我只是想出了一个解决方案来修复运行良好的跳转，所以我想我会分享。

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

于 2015-08-31T20:52:24.080 回答