边框底部问题（悬停时向下扩展）

Posted 2023-05-08

【中文标题】边框底部问题（悬停时向下扩展）

【英文标题】：Border-bottom issue (expanding downwards on hover)

【发布时间】：2013-04-28 15:48:32

【问题描述】：

我正在研究导航，但我似乎无法弄清楚如何使底部边框的大小向上增加，而不是向下扩展（这反过来又将我的标题扩展了几个像素），我可以修复设置高度的扩展标题，但边框仍将向下而不是向上延伸。

CSS：

header 
  margin: 0;
  padding: 0;
  left: 0;
  top: 0;
  width: 100%;
  position: absolute;
  background: #000000;

ul 
  list-style-type: none;
  display: block;
  margin: 0 0 0 20px;
  padding: 0;

ul li 
  display: inline-block;
  padding: 0;

ul li a
  display: block;
  border-bottom: 1px solid #fff;
  font-size: 19px;

ul li a:hover
  border-bottom: 2px solid #fff;
  background: #333;
  font-size: 19px;

html：

<header>
  <ul id="nav">
    <li><a href="">link 1</a></li>
    <li><a href="">link 2</a></li>
    <li><a href="">link 3</a></li>
  </ul>
</header>

JSFiddle：

http://jsfiddle.net/Artsen/EZWvF/

【参考方案1】：

所以你想将border-bottom增加到顶部，对吧？

实际上我最近不得不为一个网站这样做。除了设置特定的填充和边框属性之外别无他法。

我在这里编辑了您的 jsfiddle：http://jsfiddle.net/EZWvF/2/（更改了一些属性以使测试用例更加可见）

原理是：悬停时交换padding-bottom和border-bottom的像素值。 这些是您解决方案的关键：

ul li a 
 border-bottom: 1px solid white;
 padding-bottom: 5px;

ul li a:hover 
 border-bottom: 5px solid white;
 padding-bottom: 1px;

注意：这仅在您不添加 css-transition 时有效。如果你取消引用我放在小提琴中的 css-transition，你会看到 div 仍然扩展到底部。如果你想要一个 ss 过渡，你需要在 li 中添加一个单独的 div 来模拟边框。

【讨论】：

非常感谢你，昨晚我正为此拉头发。

【参考方案2】：

正如 Tyblitz 建议的那样，当您不需要过渡时，在 :hover 上使用额外的填充值非常有用。

如果您需要过渡并且不想引入额外的 div，您可以使用 line-height/height 方法来控制垂直高度。

所以不要这样做：

.nav-element a 
  color: gray;
  padding: 25px 15px;
  transition: all ease-in-out 0.2s;
  display: block;
  text-decoration: none;

这样做：

.nav-element a 
  color: gray;
  padding: 0 15px;
  line-height: 70px;
  height: 70px;
  transition: all ease-in-out 0.2s;
  display: block;
  text-decoration: none;

查看它不起作用的示例here 并且确实有效（使用行高/高度）here