1

我正在尝试创建一个文本，该文本在鼠标悬停时会变成更粗的文本。

为了实现这一点，我创建了不可见的粗体文本（为容器提供正确的宽度，当文本在鼠标悬停时改变其重量时避免跳跃）并且我只为:before伪元素从font-weight: 200;to 设置动画font-weight: 700;。

演示：http: //jsfiddle.net/ky55D/

启用文本的演示：http: //jsfiddle.net/ky55D/1/（由于某种原因，无论有无，它们都不匹配:hover）。

问题是我的示例中的第二个单词“Gravida”转到下一行，而不是放在其父级的顶部。增加更高width的.link:before帮助，但我不知道合适的宽度是多少。200%适用于 2 个单词。300%适用于 3 个单词等。

在此处输入图像描述

如果仅使用 CSS 可以解决此问题，有什么想法吗？

4

1 回答 1

2

根据 KISS 范式，我会改变方法:)

  • transparent text-shadow在正常状态下使用；

  • 使其在:hover状态下着色。

文字会显得更粗，但整体宽度不会改变，文字也不会移动。

演示：http: //jsfiddle.net/tQd6g/1/

编辑：也添加display: inline-block;到您的a元素中，因为现在它作为inline显示的对象工作，这可能不是您想要的：

演示：http: //jsfiddle.net/ky55D/2/

于 2013-09-09T09:45:18.137 回答