CSS 元素调整时 a: hover答案

【问题标题】：CSS elements adjust when a: hoverCSS 元素调整时 a: hover
【发布时间】：2013-01-02 04:27:38
【问题描述】：

我有一个<li> 菜单项，底部有 2px 边框作为下划线，并且有一个粗体悬停，它使其他元素在悬停时移动。我试图更改悬停时的填充但没有结果。（我认为问题在于边框底部添加的下划线）

#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/

【问题讨论】：

问题在于粗体。当然会改变菜单的平衡。考虑使用不同的悬停状态来调整包含元素上的填充以抵消粗体文本的位移。
列表项没有定义的高度或宽度，因此它们由嵌套文本调整大小，当您悬停时，字体大小会增加，粗体也会增加列表项大小，并且因为它们被显示：inline 这会改变整个菜单的大小，移动其他项目

标签： css hover

【解决方案1】：

尝试类似的方法：

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;
}

这将按预期完美运行，但请记住 display:table 在 IE7 和以下版本中不受支持。

【讨论】：

【解决方案2】：

使悬停时的字体大小与悬停时的正常时间相同 font-size:16px 存在，正常时间 font-size:14px 存在...悬停时字体粗体粗体存在。

【讨论】：

【解决方案3】：

只需为悬停提供以下 css。您已更改粗体、边框底部和大小，这会导致对齐问题。否则你必须给每个链接指定宽度。

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

【讨论】：

【解决方案4】：

如果改变这个

#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;

这可能会解决您的问题

【讨论】：