當文字懸停時變為粗體時，如何防止水平選單項目移動？

懸停時加粗時內聯元素移動

當水平選單中的元素懸停時移動時，可以歸因於常規文本和粗體文本之間的大小變化。本文探討了此常見問題的解決方案。

了解問題

在提供的範例中，HTML 清單和 CSS 用於建立水平選單。當滑鼠懸停在連結上時，文字會變成粗體，由於常規文字和粗體文字之間的寬度差異，導致連結發生移動。

預設寬度

解決方案涉及預設使用不可見的偽元素的元素的寬度。此偽元素包含與父級懸停狀態相同的內容和樣式。

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

• Display: block: 讓偽元素佔據其容器的整個寬度.
• Content: attr(title):
• Content: attr(title): 從父級的title 屬性中取得內容，讓它共用相同的文字。
• 字體粗細：粗體：將粗體樣式套用於偽元素。

高度：0；溢位：隱藏； Visibility: hide:

從檢視中隱藏偽元素，確保它不會影響元素的整體外觀。

透過使用具有這些屬性的偽元素，元素的寬度甚至在應用懸停狀態之前就已預先設置，從而消除了移動問題。

以上是當文字懸停時變為粗體時，如何防止水平選單項目移動？的詳細內容。更多資訊請關注PHP中文網其他相關文章！