当文本悬停时变为粗体时，如何防止水平菜单项移动？

悬停时加粗时内联元素移动

当水平菜单中的元素悬停时移动时，可以归因于常规文本和粗体文本之间的大小变化。本文探讨了此常见问题的解决方案。

了解问题

在提供的示例中，HTML 列表和 CSS 用于创建水平菜单。当鼠标悬停在链接上时，文本会变成粗体，由于常规文本和粗体文本之间的宽度差异，导致链接发生移动。

预设宽度

解决方案涉及预设使用不可见的伪元素的元素的宽度。该伪元素包含与父级悬停状态相同的内容和样式。

a::before {
    display: block;
    content: attr(title);
    font-weight: bold;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}

• Display: block: 使伪元素占据其容器的整个宽度.
• Content: attr(title): 从父级的 title 属性中获取内容，允许它共享相同的文本。
• 字体粗细：粗体：将粗体样式应用于伪元素。
• 高度：0；溢出：隐藏； Visibility: hide: 从视图中隐藏伪元素，确保它不会影响元素的整体外观。

通过使用具有这些属性的伪元素，元素的宽度甚至在应用悬停状态之前就已预先设置，从而消除了移动问题。

以上是当文本悬停时变为粗体时，如何防止水平菜单项移动？的详细内容。更多信息请关注PHP中文网其他相关文章！