Why Isn't My CSS Visibility Working on Hovered Hidden Elements?

CSS Visibility Not Working: Troubleshooting and Solution

The "spoiler" class in CSS is intended to reveal hidden text upon mouse hover, but for some reason, the text remains invisible. To address this issue, we need to understand why visibility isn't working in this context.

The issue arises because you cannot hover over a hidden element. When visibility is set to hidden, the element and its content are effectively invisible to mouse events, including mouse hover.

To resolve this, one solution is to nest the hidden element within another container element. This will allow the outer container to be hovered over, triggering the visibility change for the nested element:

CSS:

.spoiler span {
    visibility: hidden;
}

.spoiler:hover span {
    visibility: visible;
}

HTML:

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

This approach ensures that the nested element remains hidden until the mouse hovers over the outer container.

Furthermore, in Chrome, you can add an outline to the hidden element to make it easier to interact with:

.spoiler {
    outline: 1px solid transparent;
}

This updated code allows for easier visibility toggling by hovering over the outline of the hidden element.

The above is the detailed content of Why Isn't My CSS Visibility Working on Hovered Hidden Elements?. For more information, please follow other related articles on the PHP Chinese website!