web-dev-qa-db-fra.com

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

J'ai ajouté une classe "spoiler" en CSS à utiliser pour, ainsi, les spoilers. Le texte est normalement invisible mais apparaît lorsque la souris le survole pour révéler le spoiler à qui veut le lire.

.spoiler{
    visibility:hidden;

}
.spoiler:hover {
    visibility:visible;
}

Devrait être simple, mais pour une raison quelconque, cela ne fonctionne pas. Le texte reste invisible même lorsque je pointe la souris dessus. Une idée de ce qui pourrait être la cause de cela?

cssvisibility
21
Yves

Vous ne pouvez pas survoler un élément caché. Une solution consiste à imbriquer l'élément dans un autre conteneur:

CSS:

.spoiler span {
    visibility: hidden;
}

.spoiler:hover span {
    visibility: visible;
}

HTML:

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

Démo:

http://jsfiddle.net/DBXuv/

Mettre à jour

Sur Chrome, les éléments suivants peuvent être ajoutés:

.spoiler {
    outline: 1px solid transparent;
}

Démo mise à jour: http://jsfiddle.net/DBXuv/148/

39
Ates Goral

Cela fonctionne non 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;
}
13
Jon Ander

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

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

.spoiler{
    color:white;

}
.spoiler:hover {
    color:black;
}
2
leonbloy

La pseudo-classe :hover ne concerne que les balises a, conformément à la spécification CSS. Les agents utilisateurs ne sont pas tenus de prendre en charge :hover pour les balises non-ancres conformément à la spécification .

Si vous souhaitez utiliser CSS pour rendre visible le texte de votre spoiler, vous devez placer des balises <a> autour du contenu de votre spoiler. Cela signifiera bien sûr que la souris se transformerait en pointeur, mais vous pouvez le supprimer en ajoutant cursor: none;.

1
Yzmir Ramirez

Si ça ne marche pas, essayez

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

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

1
Chetan bane