Why is My Spoiler Text Not Showing on Hover?

Troubleshooting CSS Visibility Issues for Spoiler Elements

When using the visibility property in CSS to create spoiler elements, some users may encounter difficulties with the text remaining invisible even when hovering over it. This issue can stem from the fact that hovering requires a visible element to interact with.

To resolve this issue, one effective solution is to nest the spoiler element within another container. This allows the container to receive the hover event, even when the spoiler element is initially hidden. The following updated code snippet demonstrates this technique:

CSS:

.spoiler span {
    visibility: hidden;
}

.spoiler:hover span {
    visibility: visible;
}

HTML:

Spoiler: <span>

This approach ensures that the container element becomes visible when hovered, triggering the visibility of the inner spoiler element.

Demo:
http://jsfiddle.net/DBXuv/

Note: For Chrome browsers specifically, the following addition can enhance the functionality:

.spoiler {
    outline: 1px solid transparent;
}

This addition provides a visual cue to indicate the spoiler's presence, even when the initial text is hidden.

Updated Demo:
http://jsfiddle.net/DBXuv/148/

The above is the detailed content of Why is My Spoiler Text Not Showing on Hover?. For more information, please follow other related articles on the PHP Chinese website!