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

问题描述

我使用 HTML 列表和 CSS 创建了一个水平菜单。一切都可以正常工作，除非你将鼠标悬停在链接上。你看，我创建了一个大胆的悬停状态的链接，现在的菜单链接转移，因为大胆的大小差异。

我遇到与 this SitePoint post 相同的问题。但是，该帖子没有正确的解决方案。我搜索到任何地方的解决方案，找不到一个解决方案。当然我不会是唯一一个试图做到这一点的人。

有人有什么想法吗？

P.S：我不知道菜单项中文本的宽度，所以我不能只是设置 li 项的宽度。

这是我的代码：

HTML：

<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>

CSS：

.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: #ffffff; 
    margin-left: 8px; 
    margin-right: 5px; 
}
.nav li a:hover{ 
    text-decoration: none; 
    font-weight: bold; 
}
.nav li.first { border: none; }

最佳解决方案

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

CSS：

li, a {
    display:inline-block;
    text-align:center;
}
a:hover {
    font-weight:bold;
}
a::after {
    display:block;
    content:attr(title);
    font-weight:bold;
    height:1px;
    color:transparent;
    overflow:hidden;
    visibility:hidden;
    margin-bottom:-1px;
}

HTML：

<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>

次佳解决方案

如果您无法设置宽度，那么这意味着宽度将随着文本的粗体而改变。没有办法避免这种情况，除了修改每个状态的填充/边距等折中。

第三种解决方案

一个妥协的解决方案是用 text-shadow 伪装，例如：

a:hover{
  text-shadow:0 0 1px black, 0 0 1px black, 0 0 1px black
}

重复 3 次阴影使它看起来没有那么多。

第四种方案

jquery 中的一行：

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

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

第五种方案

你可以使用一些喜欢的东西

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

然后在您的 CSS 中，只需将 span 的内容设置为粗体，并将其隐藏，并显示为隐藏，以保持其维度。然后，您可以调整以下元素的边距，使其适合。

我不知道这个方法是否 SEO 友善。

第六种方案

另一个想法是使用 letter-spacing

a {
  letter-spacing: 0.05px
}

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

第七种方案

我刚刚解决了”shadow” 解决方案的问题。这似乎是最简单有效的。

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

没有必要重复三次阴影 (结果对我来说是一样的) 。

参考文献

Inline elements shifting when made bold on hover

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。

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