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

回答

相关问题