内嵌元素在悬停时变为粗体

Question

我使用HTML列表和CSS创建了一个水平菜单.除非您将鼠标悬停在链接上,否则一切都会正常工作.你看,我为链接创建了一个大胆的悬停状态,现在由于大胆的大小差异,菜单链接发生了变化.

我遇到与此SitePoint帖子相同的问题.但是,该帖子没有适当的解决方案.我到处寻找解决方案而找不到解决方案.当然,我不可能是唯一一个试图这样做的人.

有没有人有任何想法？

PS:我不知道菜单项中文本的宽度,所以我不能只设置li项的宽度.

这是我的代码:

HTML:

.nav { margin: 0; padding: 0; }
.nav li { 
    list-style: none; 
    display: inline; 
    border-left: #ffffff 1px solid; 
}
.nav li a:link, .nav li a:visited { 
    text-decoration: none; 
    color: #000; 
    margin-left: 8px; 
    margin-right: 5px; 
}
.nav li a:hover{ 
    text-decoration: none; 
    font-weight: bold; 
}
.nav li.first { border: none; }

CSS:

<ul class="nav">
    <li class="first"><a href="#">item 0</a></li>
    <li><a href="#">item 1</a></li>
    <li><a href="#">item 2</a></li>
    <li><a href="#">item 3</a></li>
    <li><a href="#">item 4</a></li>
</ul>

Answer 1

li {
    display: inline-block;
    font-size: 0;
}
li a {
    display:inline-block;
    text-align:center;
    font: normal 16px Arial;
    text-transform: uppercase;
}
a:hover {
    font-weight:bold;
}
a::after {
    display: block;
    content: attr(title);
    font-weight: bold;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}

<ul>
    <li><a href="#" title="height">height</a></li>
    <li><a href="#" title="icon">icon</a></li>
    <li><a href="#" title="left">left</a></li>
    <li><a href="#" title="letter-spacing">letter-spacing</a></li>
    <li><a href="#" title="line-height">line-height</a></li>
</ul>

检查JSfiddle上的工作示例.我们的想法是为伪元素中的粗体(或任何:hover状态样式)内容保留空间,:after并使用标题标记作为内容的来源.

Answer 2

一个妥协的解决方案是使用文本阴影伪造粗体,例如:

text-shadow:0 0 0.01px black;

为了更好地比较,我创建了以下示例

a, li {
  color: black;
  text-decoration: none;
  font: 18px sans-serif;
  letter-spacing: 0.03em;
}
li {
  display: inline-block;
  margin-right: 20px;
  color: gray;
  font-size: 0.7em;
}
.bold-x1 a.hover:hover,
.bold-x1 a:not(.hover) {
  text-shadow: 0 0 .01px black;
}
.bold-x2 a.hover:hover,
.bold-x2 a:not(.hover){
  text-shadow: 0 0 .01px black, 0 0 .01px black;
}
.bold-x3 a.hover:hover,
.bold-x3 a:not(.hover){
  text-shadow: 0 0 .01px black, 0 0 .01px black, 0 0 .01px black;
}
.bold-native a.hover:hover,
.bold-native a:not(.hover){
  font-weight: bold;
}

.bold-native li:nth-child(4),
.bold-native li:nth-child(5){
 margin-left: -6px;
 letter-spacing: 0.01em;
}

<ul class="bold-x1">
  <li><a class="hover" href="#">Home</a></li>
  <li><a class="hover" href="#">Products</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About</a></li>
  <li>Bold (text-shadow x1)</li>
</ul>
<ul class="bold-x2">
  <li><a class="hover" href="#">Home</a></li>
  <li><a class="hover" href="#">Products</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About</a></li>
  <li>Extra Bold (text-shadow x2)</li>
</ul>
<ul class="bold-native">
  <li><a class="hover" href="#">Home</a></li>
  <li><a class="hover" href="#">Products</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About</a></li>
  <li>Bold (native)</li>
</ul>
<ul class="bold-x3">
  <li><a class="hover" href="#">Home</a></li>
  <li><a class="hover" href="#">Products</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About</a></li>
  <li>Black (text-shadow x3)</li>
</ul>

传递到text-shadow非常低的值blur-radius将使模糊效果不那么明显.

一般来说,重复text-shadow你的文本将获得更大胆,但同时失去字母的原始形状.

我应该警告你,设置blur-radius分数不会在所有浏览器中呈现相同的效果!例如,Safari需要更大的值才能以与Chrome相同的方式呈现它.

Answer 3

如果您无法设置宽度,则表示宽度将随着文本变为粗体而更改.除了通过修改每个状态的填充/边距等妥协之外,没有办法避免这种情况.

Answer 4

另一个想法是使用 letter-spacing

a {
  letter-spacing: 0.05px
}

a:hover, a:focus {
  font-weight: bold;
  letter-spacing: 0
}

Answer 5

一个在jQuery的行:

$('ul.nav li a').each(function(){
    $(this).parent().width($(this).width() + 4);
});

编辑: 虽然这可以带来解决方案,但应该提到它不能与原始帖子中的代码一起使用."display:inline"必须替换为浮动参数,以使宽度设置生效并使水平菜单按预期工作.

Answer 6

如果您不想预设列表项的宽度，一个非常好的选择是尝试在列表项中使用单宽字体。

与等宽字体不同，它们仍然是比例字体——但它们在不同的字体粗细中占据相同的大小。不需要 CSS、JS 或花哨的技巧来保持大小不变​​。它直接融入到字体中。

我认为这是解决这个常见问题的一个非常优雅的解决方案。

以下是这篇优秀文章中的示例，比较了比例字体 IBM Plex Sans 和 uniwidth Recursive。

请注意，在比例字体 (IBM Plex Sans) 中，列表项如何随着粗体字体大小的变化而移动。使用单宽字体 Recursive，项目在悬停时会变为粗体，但不会更改大小。

您可以尝试的免费单宽字体有：

• 递归
• PT 根用户界面
• 戈洛斯用户界面
• 大看台

还有许多通过上述文章链接的非免费选项。

Answer 7

CSS3解决方案-实验

（假冒）

想分享一个不同的解决方案，这里没有人建议。有一个叫做的属性text-stroke将对此很方便。

p span:hover {
  -webkit-text-stroke: 1px black;
}

<p>Some stuff, <span>hover this,</span> it's cool</p>

在这里，我以span标签内的文本为目标，然后通过一个像素对其进行描边，black以此模拟bold该特定文本的样式。

请注意，此属性尚未得到广泛支持，到目前为止（在编写此答案时），似乎只有Chrome和Firefox支持此属性。有关浏览器支持的更多信息text-stroke，可以参考CanIUse。

仅用于共享一些额外的内容，-webkit-text-stroke-width: 1px;如果您不想color为自己的笔画设置a ，就可以使用。

Answer 8

你可以使用像

<ul>
   <li><a href="#">Some text<span><br />Some text</span></a></li>
</ul>

然后在你的CSS中,只需将span内容设置为粗体,并使用visibility:hidden来隐藏它,以便保持其尺寸.然后,您可以调整以下元素的边距以使其适合.

我不确定这种方法是否适合SEO.

Answer 9

我刚用"影子"解决方案解决了这个问题.这似乎是最简单有效的.

nav.mainMenu ul li > a:hover, nav.mainMenu ul li.active > a {
    text-shadow:0 0 1px white;
}

不需要重复三次阴影(结果对我来说是一样的).