为什么我的水平菜单在悬停时会发生变化，如何使用伪元素修复它？

由于粗体样式，悬停时元素对齐发生变化

使用 HTML 列表和 CSS 实现水平菜单时，经常会遇到偏移应用悬停状态时菜单项的对齐方式。发生这种转变的原因是悬停状态下的粗体字体大小与标准字体大小不同。

此问题与 SitePoint 帖子中讨论的问题类似，但没有明确的解决方案。如果文本宽度不同，设置 li 项的宽度可能不可行。

解决对齐偏移

解决方案在于使用不可见的伪元素预先设置元素的宽度。此伪元素镜像悬停状态的内容和样式，在触发悬停状态之前有效地定义元素的宽度。

li {
    display: inline-block;
    font-size: 0;
}

li a {
    display:inline-block;
    text-align:center;
    font: normal 16px Arial;
    text-transform: uppercase;
}

a:hover {
    font-weight:bold;
}

/* SOLUTION */
/* The pseudo element has the same content and hover style, so it pre-sets the width of the element and visibility: hidden hides the pseudo element from actual view. */
a::before {
    display: block;
    content: attr(title);
    font-weight: bold;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}

在此解决方案中：

• 伪元素-element (::before) 定义了块显示，允许它预先设置元素的宽度。
• 它继承了内容并悬停状态下的 font-weight （使用 attr(title) 设置内容）。
• 伪元素的高度和溢出分别设置为 0 和隐藏，以将其隐藏在视图中。

通过预设宽度，菜单项在悬停时保持对齐，无论文本长度或宽度变化如何。

以上是为什么我的水平菜单在悬停时会发生变化，如何使用伪元素修复它？的详细内容。更多信息请关注PHP中文网其他相关文章！