如何防止內聯元素在大膽懸停時發生移動？

內聯元素在粗體懸停時移動：一個全面的解決方案

在網頁設計領域，創建一個時尚且響應式的導航選單是一個簡單的方法根本任務。然而，當為內嵌連結添加粗體懸停效果時，我們經常遇到一個令人困惑的問題——由於常規文字和粗體文字之間的大小差異，選單項目明顯發生變化。這個問題困擾了許多開發者，讓他們尋找有效的解決方案。

幸運的是，一種巧妙的技術可以解決這個挑戰。透過預設連結的寬度，我們可以確保懸停時無縫過渡到粗體文本，而不會對選單佈局造成任何干擾。這是透過使用與其父連結共享相同內容和懸停樣式的不可見偽元素來實現的。

為了說明解決方案，讓我們考慮以下程式碼：

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;
}

注意加入 a::before 偽元素。該元素顯示與其父連結相同的內容，但使用visibility:hidden將其從視圖中隱藏。至關重要的是，它繼承了懸停狀態的粗體字體粗細，有效地將鏈結的寬度預先設定為其粗體對應項。

為了完成解決方案，我們為每個連結分配一個唯一的標題屬性，該屬性用於作為偽元素內容的來源。這可以確保偽元素與其父連結的文字匹配，從而保留選單的原始外觀。

透過此技術，可以實現內嵌連結上的粗體懸停效果，而不會導致選單項目位置發生任何不和諧的變化。這是一個簡單而有效的解決方案，解決了 Web 開發人員面臨的常見問題。

以上是如何防止內聯元素在大膽懸停時發生移動？的詳細內容。更多資訊請關注PHP中文網其他相關文章！