為什麼我的懸停效果對 CSS 中具有「visibility:hidden」的元素不起作用？

可見性在 CSS 中不起作用：原因及修復方法

在 CSS 樣式中，歧義有時會導致意外結果。讓我們探討一下嘗試使用「可見性」屬性隱藏文字時遇到的常見問題。

問題：

您的CSS 內容如下：

.spoiler {
    visibility: hidden;
}

.spoiler:hover {
    visibility: visible;
}

根據此配置，將滑鼠懸停在帶有“.spoiler”類別的文字上應該會顯示它。但是，這種情況不會發生，無論滑鼠位置如何，文字都將不可見。

原因：

問題在於隱藏元素的預設行為。在滑鼠事件（包括懸停）期間，使用者代理無法識別具有「可見性：隱藏」的元素。因此，懸停狀態永遠不會啟動。

解決方案1：嵌套元素

要克服這個挑戰，可以將劇透文本嵌套在另一個文本中element:

CSS:

.spoiler span {
    visibility: hidden;
}

.spoiler:hover span {
    visibility: visible;
}

HTML:

Spoiler: <span>

此解決方案有效，因為嵌套的span 元素隱藏可見性最初可見性最初會阻止滑鼠事件。但是，當「.spoiler」父元素收到懸停事件時，它會啟動並顯示 span 元素，使文字可見。

解決方案2（僅限Chrome）：大綱技巧

Chrome 的另一種方法是向“.spoiler”添加輪廓元素：

.spoiler {
    outline: 1px solid transparent;
}

此技術創建了一個響應滑鼠事件的不可見的碰撞盒，允許懸停效果在隱藏元素上正常運作。

以上是為什麼我的懸停效果對 CSS 中具有「visibility:hidden」的元素不起作用？的詳細內容。更多資訊請關注PHP中文網其他相關文章！