导航菜单生涩与悬停

我怎么能停止我的悬停jerkiness似乎移动几个像素：导航菜单生涩与悬停

CSS：

header nav ul li{ 
    list-style:none; 
    display:inline-block; 
} 
header nav li a { 
    color:#8f3479; 
    text-align:center; 
    width:30px; 
    padding:15px; 
} 
header nav li a:hover, .current{ 
    padding:15px; 
    font-weight:bold; 
    background-color:#8f3479; 
    border-radius:5px; 
    color:#fff; 
}

HTML：

<header> 
     <div class="branding"></div> 
      <nav> 
       <ul> 
        <li><a class="current" href="#">Home</a></li> 
        <li><a href="#">Portfolio</a></li> 
        <li><a href="#">Contact</a></li> 
       </ul> 
      <nav> 
    </header>

来源

2012-06-29 Jess McKenzie

“急躁”是因为你的字体在悬停时变成了粗体，而粗体字体变宽了。你正在寻找一种方法来保持悬停的大胆，但消除“急躁”？ – thirtydot

这是因为对悬停状态的大胆对待而发生的。如果您也将粗体添加到常规链接中，则两个状态都将保持不变。看到这个小提琴为例 - http://jsfiddle.net/ZhM3T/1/

来源

2012-06-29 21:18:30 Keith

导航菜单生涩与悬停

回答

相关问题