揭開謎團：為什麼CSS 可見性在懸停時失敗

CSS 可見性提供了操作元素可見性的便捷方法，但有時它會偶然發現意想不到的障礙。考慮這樣一個場景，您定義了一個「擾流器」類別來使文字最初不可見，並在滑鼠懸停時顯示它。儘管您有期望，文字仍然頑固地保持在隱藏狀態，無視您的懸停努力。

深入探討原因

這種令人困惑的行為背後的罪魁禍首在於大自然的隱藏元素。當使用visibility:hidden隱藏元素時，它實際上變得不可見並且不佔用頁面佈局中的空間。這意味著嘗試懸停在它上面本質上就像嘗試與虛空互動一樣。該元素根本不註冊懸停操作。

解決可見性困境

要克服此障礙，您需要為元素提供一種保持可見的方法即使其內容被隱藏。一種方法是將元素嵌套在可以接收懸停事件的另一個容器內。實現此目的的方法如下：

CSS:

.spoiler span {
    visibility: hidden;
}

.spoiler:hover span {
    visibility: visible;
}

HTML:

Spoiler: E.T. phones home.

說明：

透過將隱藏文字嵌套在span在元素中，可以確保外部擾流板元素保持可見，允許它捕獲懸停事件。當懸停發生時，內部 span 元素變得可見，顯示劇透文字。

其他注意事項

在某些瀏覽器（如Chrome）中，您可能會遇到一個小問題，其中隱藏的擾流板元素仍然可以用滑鼠稍微選擇。為了解決這個問題，你可以為劇透元素加上一個輪廓：

.spoiler {
    outline: 1px solid transparent;
}

這個透明的輪廓確保擾流板元素有足夠的大小來接收懸停事件，而不妨礙文本的整體可見性。

透過這些調整，您的擾流板類將完美地運行，保留隱藏文字的不可見性並提供無縫的懸停體驗。