為什麼 CSS `visibility:hidden` 無法達到懸停效果？

揭開謎底：為什麼CSS 可見性無法懸停

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

深入探究原因

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

解決可見性困境

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

CSS:

.spoiler span {
    visibility: hidden;
}

.spoiler:hover span {
    visibility: visible;
}

HTML:

Spoiler: <span class="spoiler"><span>E.T. phones home.</span></span>

解釋：

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

其他注意事項

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

.spoiler {
    outline: 1px solid transparent;
}

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

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

以上是為什麼 CSS `visibility:hidden` 無法達到懸停效果？的詳細內容。更多資訊請關注PHP中文網其他相關文章！