行内元素在悬停时加粗时发生移动

我使用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>

当前回答

不是很优雅的解决方案，但“有效”:

a
{
    color: #fff;
}

a:hover
{
    text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
}

2017-01-10 15:45:40

其他回答

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

2009-02-17 10:09:28

你可以用

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

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

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

2012-12-04 11:17:44

我用几行javascript解决了这个问题。

$('a.menu_item').each(function() {
    let width = $(this).width();
    $(this).css('width',width + 'px');
});

2021-09-21 10:47:28

我使用文本阴影解决方案，其他一些提到这里:

text-shadow: 0 0 0.01px;

不同之处在于我没有指定阴影颜色，所以这个解决方案适用于所有字体颜色。

2019-02-26 15:02:18

这个呢?一个javascript - CSS3免费的解决方案。

http://jsfiddle.net/u1aks77x/1/

ul{}
li{float:left; list-style-type:none; }
a{position:relative; padding-right: 10px; text-decoration:none;}
a > .l1{}
a:hover > .l1{visibility:hidden;}
a:hover > .l2{display:inline;}
a > .l2{position: absolute; left:0; font-weight:bold; display:none;}

<ul>
  <li><a href="/" title="Home"><span class="l1">Home</span><span class="l2">Home</span></a></li>
  <li><a href="/" title="Contact"><span class="l1">Contact</span><span class="l2">Contact</span></a></li>
  <li><a href="/" title="Sitemap"><span class="l1">Sitemap</span><span class="l2">Sitemap</span></a></li>
</ul>

2015-12-04 01:02:09

行内元素在悬停时加粗时发生移动

推荐文章

最新文章

标签