html - 悬停时孩子的“添加填充”不会忽略父母的填充并且文本向下移动

Question

我正在尝试创建一个链接悬停效果，其中背景在悬停时变为白色，并且白色背景从中心扩展（中心到顶部，中心到底部）。

父 div 元素具有 24px 的现有顶部/底部填充，因此内部链接元素放置在 div 的中心（距 div 顶部 24px）。当鼠标悬停在链接上时，链接的顶部/底部填充从原来的 0px 变为 24px，据说会增加子元素（链接）的大小以覆盖整个父 div。同时，孩子的背景变为白色，赋予动画效果。

然而，当我尝试这个（见下文）时，子元素（链接）的顶部保持在同一个地方（我认为尊重父级的 24px 填充）而不是向上移动，并且子元素向下增长。结果，文本（居中）也向下移动。为什么孩子不会像下面的示例代码中那样忽略父母的填充，为什么孩子不会从原始中心向上和向下生长？

谁能想到为什么会发生这种情况？我对父母和孩子使用与下面相同的代码。

我在网上找到的用于执行此操作的代码示例附在下面。在此链接中也可以将其视为示例 3：

https://codepen.io/Calloumi/pen/vndlH

注意：下面的演示有效。在我的网页（下图）中，悬停效果不起作用。

html:

@import url(https://fonts.googleapis.com/css?family=Raleway);
body {
  margin: 0px;
}
div {
  padding: 24px;
  text-align: center;
  font-family: Raleway;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
  border: 1px solid blue;
}

#nav-3 {
  background: #EEA200;
}

.link-3 {
  transition: 0.4s;
  color: #ffffff;
  font-size: 20px;
  text-decoration: none;
  padding: 0 10px;
  margin: 0 10px;

}
.link-3:hover {
  background-color: #eeeeee;
  color: #EEA200;
  padding: 24px 10px;
}

<div id="nav-3">
    <a class="link-3" href="#">Home</a>
    <a class="link-3" href="#">About</a>
    <a class="link-3" href="#">Contact</a>
    <a class="link-3" href="#">Shop</a>
</div>

标签： htmlcss