導航菜單生澀與懸停

我怎麼能停止我的懸停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

導航菜單生澀與懸停

回答

相關問題