Html 如何防止所有菜单项在：hover上添加样式？

最近我注意到，当您在：hover上设置菜单项的样式时，一些属性（如文本阴影、颜色、背景）和许多其他属性会应用于当前悬停的菜单项

但是，padding属性似乎应用于所有菜单项，而不仅仅是悬停在上面的菜单项

下面是一个例子：

正如您在Codepen中看到的，文本阴影应用于单个菜单项，而填充应用于所有元素

我能做些什么来防止这种情况

---

我只希望一个菜单项同时悬停。

填充未应用于所有菜单项。发生的情况是，父容器的高度被悬停效果扩展，并且由于其他菜单项是顶部对齐的，因此它们也会升高

试试这个：

.main-navigation a:hover {
  ...
  margin-bottom: 0;
  margin-top: -7px;
}

---

填充未应用于所有菜单项。发生的情况是，父容器的高度被悬停效果扩展，并且由于其他菜单项是顶部对齐的，因此它们也会升高

试试这个：

.main-navigation a:hover {
  ...
  margin-bottom: 0;
  margin-top: -7px;
}

问题 您的

ulli a

最初有一个负的保证金底部。 但是，当您将鼠标悬停在

a

上时，会将页边距底部重置为0。这会导致箱子变大，并将整个导航条向上推

洞察力

---

填充未应用于所有列表项。导航框中的一个链接是将整个导航栏向上推，这样看起来就像将填充应用于所有列表项

演示 运行此代码段进行演示。菜单项是黑色的

标题{
最小高度：10em；
背景：rgba（0,0,0,0.25）；
位置：相对位置；
}
h1{
文本对齐：居中；
}
.集装箱{
背景：绿色；
列表样式：无；
位置：绝对位置；
填充：0；
保证金：0；
底部：0；
}
.货柜：之后{
显示：块；
内容：''；
明确：两者皆有；
}
李{
浮动：左；
右边距：0.5em；
显示：内联块；
背景：黑色；
位置：相对位置；
}
跨度{
颜色：红色；
边缘底部：-0.75em；
显示：块；
过渡：所有3s；
}
跨度：悬停{
页边距底部：0；
}

标题


你好


那里


朋友

问题 您的

ulli a

最初有一个负的保证金底部。 但是，当您将鼠标悬停在

a

上时，会将页边距底部重置为0。这会导致箱子变大，并将整个导航条向上推

洞察力

---

填充未应用于所有列表项。导航框中的一个链接是将整个导航栏向上推，这样看起来就像将填充应用于所有列表项

演示 运行此代码段进行演示。菜单项是黑色的

标题{
最小高度：10em；
背景：rgba（0,0,0,0.25）；
位置：相对位置；
}
h1{
文本对齐：居中；
}
.集装箱{
背景：绿色；
列表样式：无；
位置：绝对位置；
填充：0；
保证金：0；
底部：0；
}
.货柜：之后{
显示：块；
内容：''；
明确：两者皆有；
}
李{
浮动：左；
右边距：0.5em；
显示：内联块；
背景：黑色；
位置：相对位置；
}
跨度{
颜色：红色；
边缘底部：-0.75em；
显示：块；
过渡：所有3s；
}
跨度：悬停{
页边距底部：0；
}

标题


你好


那里


朋友

OP可能需要设置一个固定的高度，也可能需要绝对定位链接。谢谢，这帮助我简单地了解出了什么问题。这似乎是一种转变：我需要的是translateY！OP要么需要设置一个固定的高度，要么绝对定位链接。谢谢，这帮助我简单地理解了哪里出了问题。这似乎是一种转变：我需要的是translateY！谢谢你详细解释一切。TranslateY正是我所需要的！谢谢你详细解释一切。TranslateY正是我所需要的！