我使用HTML列表和CSS创建了一个水平菜单。一切工作,它应该除了当你悬停在链接。您可以看到,我为链接创建了一个粗体悬浮状态,现在菜单链接因为粗体大小的差异而移动。

我遇到了和这篇SitePoint文章一样的问题。然而,这篇文章并没有合适的解决方案。我到处寻找解决办法,但没有找到。 我肯定不是唯一一个想这么做的人。

有人有什么想法吗?

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

.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; } <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>


当前回答

CSS3解决方案-实验性(假大胆)

想分享一个不同的解决方案,没有人在这里建议。有一个属性叫text-stroke,它会很方便。

P跨度:悬停{ -webkit-text-stroke: 1px黑色; } <p>一些东西,< span>hover this,</span> it's cool</p>

在这里,我针对span标签内的文本,我们用黑色像素描边它,这将模拟该特定文本的粗体样式。

注意,这个属性还没有得到广泛的支持,到目前为止(在写这个答案的时候),似乎只有Chrome和Firefox支持这个属性。有关浏览器支持文本笔画的更多信息,可以参考CanIUse。


只是为了分享一些额外的东西,你可以使用-webkit-text-stroke-width: 1px;如果你不打算为你的笔画设置颜色。

其他回答

如果粗体字体比常规字体宽,你也可以试试负边距。(不总是) 因此,我们的想法是使用类来设置:hover状态的样式。

jQuery:

 $(".nav-main .navbar-collapse > ul > li > a").hover(function() {
    var originalWidth = $(this).outerWidth();

    $(this).parent().addClass("hover");
    $(this).css({
       "margin-left": -(($(this).outerWidth() - originalWidth) / 2),
       "margin-right": -(($(this).outerWidth() - originalWidth) / 2)
    });
 },
 function() {
    $(this).removeAttr("style");
    $(this).parent().removeClass("hover");
 });

CSS:

ul > li > a {
    font-style: normal;
}

ul > li > a.hover {
    font-style: bold;
}

希望我能帮上忙!

使用字母间距和文本阴影:

a {
  letter-spacing: .1em;
}

a:hover {
  text-shadow: 0 0 .9px #color, 0 0 .9px #color, 0 0 .9px #color;
}

试试这个:

.nav {
  font-family: monospace;
}

你可以用

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

然后在CSS中,将span content设置为粗体,用可见性隐藏它:hidden,这样它就能保持它的维度。然后,您可以调整以下元素的边距,使其适当适合。

我不确定这种方法是否是SEO友好的。

Seeing a lot of great but very involved answers here. There's really not a need for resetting widths, adding hidden elements, reworking elements for different layout declarations, etc. The simplest solution is just to account for the increase in size from the bold text by adjusting the font size in the hover declaration to a slightly smaller size. Like for example font-size: .985em from the normal 1em declaration, which allows the text to bold when hovered but also maintain the original size appearance.