Html 儿童'；s"；添加填充“；悬停时不'；不要忽视父母'；s填充，文本向下移动
我试图创建一个链接悬停效果，悬停时背景变为白色，白色背景从中心展开（从中心到顶部，从中心到底部） 父div元素具有24px的现有顶部/底部填充，因此内部链接元素放置在div的中心（距离div顶部24px）。鼠标悬停链接时，链接的顶部/底部填充从原来的0px更改为24px，据说会增加子元素（链接）的大小以覆盖整个父div。同时，子元素的背景更改为白色，从而产生动画效果 然而，当我尝试这样做（见下文）时，子元素（link）的顶部保持在相同的位置（我认为应该尊重父元素24px的填充），而不是向上移动，子元素向下移动。因此，文本（居中）也向下移动。为什么孩子不像下面的示例代码那样忽略父母的填充，为什么孩子不从原始中心向上和向下生长 有人能想到为什么会发生这种情况吗？我对家长和孩子使用的代码与下面相同 我在网上找到的代码示例附在下面。也可以在本链接中看到示例3： 注意：下面的演示可以正常工作。在我的网页（下图）中，悬停效果不起作用 Html:Html 儿童'；s"；添加填充“；悬停时不'；不要忽视父母'；s填充，文本向下移动,html,css,Html,Css,我试图创建一个链接悬停效果，悬停时背景变为白色，白色背景从中心展开（从中心到顶部，从中心到底部） 父div元素具有24px的现有顶部/底部填充，因此内部链接元素放置在div的中心（距离div顶部24px）。鼠标悬停链接时，链接的顶部/底部填充从原来的0px更改为24px，据说会增加子元素（链接）的大小以覆盖整个父div。同时，子元素的背景更改为白色，从而产生动画效果 然而，当我尝试这样做（见下文）时，子元素（link）的顶部保持在相同的位置（我认为应该尊重父元素24px的填充），而不是向上移动，
@导入url(https://fonts.googleapis.com/css?family=Raleway);
身体{
边际：0px；
}
div{
填充：24px；
文本对齐：居中；
字体系列：雷威；
盒影：2px2px8pxRGBA（0,0,0,0.5）；
边框：1px纯蓝色；
}
#导航-3{
背景：#EEA200；
}
.link-3{
过渡：0.4s；
颜色：#ffffff；
字体大小：20px；
文字装饰：无；
填充：0 10px；
利润率：0.10px；
}
.link-3：悬停{
背景色：#eeeeee；
颜色：#EEA200；
填充：24px 10px；
}