為什麼我不能將滑鼠懸停在隱藏元素上：CSS 可見性難題？

隱藏元素故障排除：CSS 可見性困境

為了追求劇透隱藏能力，您已經實現了一個「劇透」類，利用CSS 可見性屬性。然而，您的努力遇到了意想不到的障礙：懸停時擾流板仍然隱藏。讓我們深入研究這個問題並找到解決方案。

懸停不可見性的挑戰

CSS 可見性屬性，如您所願，使元素隱藏。然而，出現了一個重要的警告：一旦元素被隱藏，它就會進入無法接收任何輸入（包括懸停事件）的狀態。這造成了一個困境，因為將滑鼠懸停在隱藏元素上恰恰會觸發劇透。

創意的解決方案：嵌套元素

為了克服這個障礙，我們將採用巧妙的嵌套技術。透過將劇透文字放置在嵌套的 中，元素，我們可以選擇性地定位和切換其可見性，同時保持外部容器上的懸停互動。

更新了CSS 和HTML 結構

.spoiler span {
    visibility: hidden;
}

.spoiler:hover span {
    visibility: visible;
}

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

示範和特定於Chrome 的改進

示範和特定於Chrome 的改進

此處查看現場演示：http://jsfiddle.net/DBXuv/。您會注意到懸停時會出現劇透文字。

.spoiler {
    outline: 1px solid transparent;
}

對於 Chrome 用戶，額外的 CSS 規則可以增強可訪問性：

此輪廓添加了隱藏元素的微妙視覺指示存在，讓用戶更容易發現劇透內容。 透過 Chrome 改進更新了示範：http://jsfiddle.net/DBXuv/148/。

以上是為什麼我不能將滑鼠懸停在隱藏元素上：CSS 可見性難題？的詳細內容。更多資訊請關注PHP中文網其他相關文章！