Why Can't I Hover Over a Hidden Element: A CSS Visibility Conundrum?

Troubleshooting Hidden Elements: CSS Visibility Dilemma

In a quest for spoiler-hiding prowess, you've implemented a "spoiler" class leveraging the CSS visibility property. However, your efforts have met an unexpected hurdle: the spoilers remain hidden when hovering. Let's delve into the issue and find a resolution.

The Challenge with Hovering Invisibility

The CSS visibility property, as you intended, makes the element hidden. However, a crucial caveat emerges: once an element is hidden, it enters a state where it cannot receive any input, including hover events. This poses a dilemma, as hovering over the hidden element is precisely the trigger for revealing the spoiler.

A Creative Solution: Nested Elements

To overcome this barrier, we'll employ a clever nesting technique. By placing the spoiler text inside a nested element, we can selectively target and toggle its visibility while maintaining hover interaction on the outer container.

Updated CSS and HTML Structure

.spoiler span {
    visibility: hidden;
}

.spoiler:hover span {
    visibility: visible;
}

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

Demo and Chrome-Specific Improvement

Check out the live demonstration here: http://jsfiddle.net/DBXuv/. You'll notice the spoiler text now appears upon hovering.

For Chrome users, an additional CSS rule can enhance accessibility:

.spoiler {
    outline: 1px solid transparent;
}

This outline adds a subtle visual indication of the hidden element's presence, making it easier for users to discover the spoiler content.

Updated demo with the Chrome improvement: http://jsfiddle.net/DBXuv/148/.

The above is the detailed content of Why Can't I Hover Over a Hidden Element: A CSS Visibility Conundrum?. For more information, please follow other related articles on the PHP Chinese website!