為什麼我的 CSS 可見性不適用於懸停的隱藏元素？

CSS 可見性不起作用：故障排除和解決方案

CSS 中的「spoiler」類別旨在滑鼠懸停時顯示隱藏文本，但由於某種原因，文本仍然不可見。為了解決這個問題，我們需要理解為什麼可見性在這種情況下不起作用。

出現這個問題是因為您無法將滑鼠懸停在隱藏元素上。當可見性設定為隱藏時，元素及其內容實際上對滑鼠事件不可見，包括滑鼠懸停。

要解決此問題，一種解決方案是將隱藏元素嵌套在另一個容器元素中。這將允許將滑鼠懸停在外部容器上，從而觸發嵌套元素的可見性變更：

CSS:

.spoiler span {
    visibility: hidden;
}

.spoiler:hover span {
    visibility: visible;
}

HTML:

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

此方法可確保嵌套元素保持隱藏狀態，直到滑鼠懸停在外部元素上

此外，在Chrome 中，您可以向隱藏元素添加輪廓，以便更輕鬆地與以下元素進行互動：

.spoiler {
    outline: 1px solid transparent;
}

此更新的程式碼允許透過將滑鼠懸停在上方來更輕鬆地切換可見性隱藏元素的輪廓。

以上是為什麼我的 CSS 可見性不適用於懸停的隱藏元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！