我使用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:
350D.. 363
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;
}
检查JSfiddle上的工作示例.我们的想法是为伪元素中的粗体(或任何:hover状态样式)内容保留空间,:after并使用标题标记作为内容的来源.
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;
}一个妥协的解决方案是使用文本阴影伪造粗体,例如:
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;
}
如果您无法设置宽度,则表示宽度将随着文本变为粗体而更改.除了通过修改每个状态的填充/边距等妥协之外,没有办法避免这种情况.
另一个想法是使用 letter-spacing
a {
letter-spacing: 0.05px
}
a:hover, a:focus {
font-weight: bold;
letter-spacing: 0
}
一个在jQuery的行:
$('ul.nav li a').each(function(){
$(this).parent().width($(this).width() + 4);
});
编辑: 虽然这可以带来解决方案,但应该提到它不能与原始帖子中的代码一起使用."display:inline"必须替换为浮动参数,以使宽度设置生效并使水平菜单按预期工作.
想分享一个不同的解决方案，这里没有人建议。有一个叫做的属性text-stroke将对此很方便。
p span:hover {
-webkit-text-stroke: 1px black;
}Some stuff, hover this, it's cool
你可以使用像
然后在你的CSS中,只需将span内容设置为粗体,并使用visibility:hidden来隐藏它,以便保持其尺寸.然后,您可以调整以下元素的边距以使其适合.
我不确定这种方法是否适合SEO.
我刚用"影子"解决方案解决了这个问题.这似乎是最简单有效的.
nav.mainMenu ul li > a:hover, nav.mainMenu ul li.active > a {
text-shadow:0 0 1px white;
}
不需要重复三次阴影(结果对我来说是一样的).
京公网安备 11010802040832号 | 京ICP备19059560号-6 