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

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

当前回答

我刚刚用“影子”解决了这个问题。这似乎是最简单有效的。

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

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

2013-09-04 13:20:44

其他回答

我喜欢用文本阴影代替。特别是因为您可以使用过渡来动画文本阴影。

你真正需要的是:

a {
  transition: text-shadow 1s;
}
a:hover {
  text-shadow: 1px 0 black;
}

要获得完整的导航，请查看这个jsfiddle: https://jsfiddle.net/831r3yrb/

浏览器支持和更多关于文本阴影的信息: http://www.w3schools.com/cssref/css3_pr_text-shadow.asp

2016-11-30 09:30:30

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;如果你不打算为你的笔画设置颜色。

2016-06-02 10:53:16

我可以给你两种建议

第一个选项:是将每个列表项的宽度设置为%

这里有一个简单的例子

<ul>
  <li><a href="#">First Item</a></li>
  <li><a href="#">Second Item</a></li>
  <li><a href="#">Third Item</a></li>
  <li><a href="#">Fourth Item</a></li>
</ul>

li {
  list-style-type: none;
  display: inline-block;
  width: 24%;
}

a {
  text-decoration: none;
  color: #333;
  font-size: 1.4em;
  background: #A5C77F;
  display: block;
  padding: 10px 15px;
  margin: 10px 0;
  border-right: 1px solid whitesmoke;
  transition: font-weight .3s;
}

a:hover {
  font-weight: bold;   
}

第二种选择:在活动元素上使用文本阴影

text-shadow: 0 0 .65px #333, 0 0 .65px #333;

但我建议使用第一个选项，即为每个元素指定一个百分比的宽度，因为文本阴影并不总是在移动浏览器中工作

2022-04-07 19:00: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

最好使用a::before而不是a::after，就像这样:

.breadcrumb { margin: 0; padding: 0; list-style: none; overflow: hidden; } .breadcrumb li, .breadcrumb li a { display: inline-block; } .breadcrumb li:not(:last-child)::after { content: '>'; /* or anything else */ display: inline-block; } .breadcrumb a:hover { font-weight: bold; } .breadcrumb a::before { display: block; content: attr(data-label); font-weight: bold; height: 0; overflow: hidden; visibility: hidden; } <ul class="breadcrumb"> <li><a data-label="one" href="https://www.google.fr/" target="_blank">one</a></li> <li><a data-label="two" href="https://duckduckgo.com/" target="_blank">two</a></li> <li><a data-label="three" href="#">three</a></li> </ul>

详情请访问:https://jsfiddle.net/r25foavy/

2019-05-15 13:04:44

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

推荐文章

最新文章

标签