CSS元素在進行下列操作時進行調整：hover

I有<li>菜單項以2px邊框底部爲下劃線，並且大膽懸停，使其他元素在懸停時移動。我試圖改變懸停的填充，但沒有結果。（我認爲這個問題是邊框底部的加下劃線）CSS元素在進行下列操作時進行調整：hover

#menu { 
    list-style: none outside none; 
    margin-top:40px; 
    text-align: center} 

#menu li { 
    margin-right: 26px; 
    display:inline;} 

#menu a:hover { 
    border-bottom:2px solid #ac9962; 
    font-size:16px; 
    letter-spacing: -2px; 
    white-space: nowrap; 
    font-weight:bold;} 

<ul id="menu"> 
     <li><a href="www.youtube.com">Menu1</a></li> 
     <li><a href="www.youtube.com">Menu2</a></li> 
     <li><a href="www.youtube.com">Menu3</a></li> 
     <li><a href="www.youtube.com">Menu4</a></li> 
     </ul>

http://jsfiddle.net/tGcfh/

來源

2013-01-18 Spectre

這個問題比anythng的更加大膽。當然_會改變菜單的平衡。考慮使用不同的懸停狀態來調整包含元素的填充以對抗粗體文本的位移。 – Kyle

列表中的項目沒有爲它們定義的高度或寬度，因此它們的大小由嵌套文本決定，當您將鼠標懸停在字體大小增加以及粗體增加列表項大小時，並且因爲它們顯示：inline this更改整個菜單的大小移動其他項目 – Jeremy

嘗試類似的東西：

HTML

<div id="menu_container"> 
    <ul> 
    <li><a href="#">Link one</a></li> 
    <li><a href="#">Link two</a></li> 
    <li><a href="#">Link three</a></li> 
    </ul> 
</div>

CSS

#menu_container { 
    width: 100%; 
    display: table; 
} 

#menu_container ul li { 
    display: table-cell; 
    text-align: center; 
    vertical-align: middle; 
    height: 50px; 
} 

#menu_container ul li a { 
    font-size: 14px; 
} 

#menu_container ul li a:hover { 
    font-size: 24px; 
}

這將完全按預期工作，但必須記住，顯示：不支持臺在IE7和波紋管。

來源

2013-01-18 12:54:24

請讓我知道如果嘗試過，併爲您工作 –

使字體大小懸停時間和懸停時字體大小正常時間相同：16px的是存在的，正常時間字體大小：14px是否有...和懸停時間字體粗體是否有。

來源

2013-01-18 12:53:24 Gopikrishna

只是給下面的CSS懸停。你已經給了大膽的邊界底部和大小的變化，它會導致對齊問題。否則，你必須給每個鏈接指定寬度。

#menu2 a:hover { 
text-decoration:underline; 
}

來源

2013-01-18 12:55:52

如果改變這個

#menu a:hover { 
border-bottom:2px solid #ac9962; 
font-size:16px; 
letter-spacing: -2px; 
white-space: nowrap; 
font-weight:bold;}

刪除

font-size:16px; 
letter-spacing: -2px; 
font-weight:bold;

這可能會解決您的問題

來源

2013-01-22 08:11:48 QArea

CSS元素在進行下列操作時進行調整：hover

回答

相關問題