Unveiling the Mystery: Why CSS Visibility Fails for Hover

CSS visibility offers a convenient way to manipulate element visibility, but sometimes it stumbles upon unexpected roadblocks. Consider a scenario where you've defined a "spoiler" class to render text invisible initially and reveal it on mouse hover. Despite your expectations, the text stubbornly persists in its hidden state, defying your hover efforts.

Diving into the Cause

The culprit behind this baffling behavior lies in the nature of hidden elements. When an element is hidden using visibility:hidden, it effectively becomes invisible and consumes no space in the page layout. This means that attempting to hover over it is essentially like trying to interact with the void. The element simply doesn't register the hovering action.

Resolving the Visibility Dilemma

To overcome this hurdle, you need to provide the element with a way to stay visible even when its content is hidden. One approach is to nest the element inside another container that can receive the hover event. Here's how you can achieve this:

CSS:

.spoiler span {
    visibility: hidden;
}

.spoiler:hover span {
    visibility: visible;
}

HTML:

Spoiler: E.T. phones home.

Explanation:

By nesting the hidden text within a span element, you ensure that the outer spoiler element remains visible, allowing it to capture the hover event. When the hover occurs, the inner span element becomes visible, revealing the spoiler text.

Additional Considerations

In certain browsers like Chrome, you may encounter a slight issue where the hidden spoiler element is still slightly selectable with the mouse. To address this, you can add an outline to the spoiler element:

.spoiler {
    outline: 1px solid transparent;
}

This transparent outline ensures that the spoiler element has sufficient size to receive the hover event without hindering the overall visibility of the text.

With these adjustments, your spoiler class will function flawlessly, preserving the invisibility of the hidden text and providing a seamless hovering experience.