Pourquoi la visibilité CSS ne fonctionne-t-elle pas ?

Question

J'ai ajouté une classe "spoiler" en CSS à utiliser pour, eh bien, les spoiler. Le texte est normalement invisible, mais apparaît lorsque la souris passe dessus pour révéler le spoiler à quiconque veut le lire.

.spoiler{
    visibility:hidden;

}
.spoiler:hover {
    visibility:visible;
}

Ça devrait être simple, mais pour une raison quelconque, ça ne marche pas. Le texte reste invisible même quand je pointe la souris dessus. Une idée de ce qui pourrait être à l'origine de ça ?

Answer 1

Cela ne fonctionne pas seulement pour le texte

.spoiler {
    opacity:0;
}
.spoiler:hover {
    opacity:1;
    -webkit-transition: opacity .25s ease-in-out .0s;
    transition: opacity .25s ease-in-out .0s;
}

Answer 2

Lorsque le texte est invisible, il n'occupe pratiquement pas d'espace, il est donc pratiquement imposible de déclencher un événement au survol.

Vous devriez essayer une autre approche, par exemple, changer la couleur de la police :

.spoiler{
    color:white;

}
.spoiler:hover {
    color:black;
}

Answer 3

Si cela ne fonctionne pas, essayez

.spoiler span {
    visibility: hidden;
    line-height:20px;
}

.spoiler:hover span {
    visibility: visible;
    line-height:20px;
}