Pourquoi n'est-ce pas CSS visibilité de travail?

J'ai ajouté un "spoiler" classe CSS à utiliser pour les spoilers. Le texte est normalement invisible mais apparaît lorsque la souris survole de révéler l'aileron à qui veut bien 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 quand je pointe la souris sur elle. Toute idée de ce que pourrait être la cause?

InformationsquelleAutor Yves | 2011-02-08
  1. 43

    Vous ne pouvez pas vous passez la souris sur un élément masqué. Une solution consiste à imbriquer l'élément à l'intérieur d'un 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/

    Mise à jour

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

    .spoiler {
    outline: 1px solid transparent;
}

    Mise à jour de la démo: http://jsfiddle.net/DBXuv/148/

    • +1 Jolie petite astuce CSS
    • Sympa, mais les plus vieux navigateurs ne gèrent pas les span:hover...
    • Ramirez: Ce n'était qu'une démonstration de ce concept. En fonction de la cible les navigateurs, un plus un conteneur approprié comme un mannequin <a> peuvent être récupérés.
    • Ne fonctionne pas sur Chrome 23.
    • Je savais que cela devait être là-bas. N'a pas été déçu. Merci
    • méchant chrome bug, par les regards de celui-ci: vous pouvez l'éviter en ajoutant .spoiler {outline:1px solid transparent;} ou à peu près tout ce qui pourrait faire l'élément "rendu" même si tous les rendus pixels arrive d'être transparent.
    • Merci @EamonNerbonne. Mise à jour: jsfiddle.net/DBXuv/148 (Et BTW, wow. Des gens l'ont fait 147 expériences sur ce sujet).
    • Notez que visibility peut rendre mal dans certains cas. En particulier, si vous avez plusieurs divs avec le contenu caché, et que ce contenu contient des images, lorsque vous placez un div, puis une autre le nouveau affiché div peuvent apparaître plus rapidement que les images de la précédente div disparaissent (testé sur plusieurs navigateurs). Dans de tels cas, Jon Ander la solution ci-dessous semble beaucoup plus efficace.

    InformationsquelleAutor Ates Goral
  2. 19

    Il ne travaille 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;
}
    • Solution élégante. Contrairement à d'autres réponses (à l'exception de la accepté de, qui a quelques inconvénients, voir les commentaires), il ne travaille pas seulement pour le texte, mais aussi pour autre chose.
    InformationsquelleAutor Jon Ander
  3. 2

    Lorsque le texte est invisible, pratiquement, ne pas occuper l'espace, de sorte qu'il est pratiquement impossible de déclencher un hover événement.

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

    .spoiler{
    color:white;

}
.spoiler:hover {
    color:black;
}
    • La propriété de visibilité ne prennent de la place, c'est la propriété d'affichage qui n'est pas.
    • N'est-ce pas la façon phpBB mettre en œuvre leurs [spoiler] tags?
    InformationsquelleAutor leonbloy
  4. 1

    :hover pseudo-classe est uniquement pour a balises en CSS. Les agents utilisateurs ne sont pas tenus de soutien :hover pour les non-ancrage des balises selon la spécification.

    Si vous souhaitez utiliser les CSS pour rendre visible votre spoiler texte, vous devrez placer un <a> balises autour de votre spoiler le contenu. Bien sûr, cela signifie que la souris se transforme en pointeur, mais vous pouvez supprimer en ajoutant cursor: none;.

    • Vous pouvez toujours le nid de l'élément à l'intérieur d'un mannequin <a href="#"> alors...
    • Je viens de voir votre commentaire à ma réponse. Et oui @Ates Goral est correct. C'est en fait la façon dont de nombreux menus CSS de travail par la voie.
    • :hover est valable pour tous les éléments. Selon la spécification de vous lié, certains agents Utilisateurs ne pourraient pas faire face, mais il ne fait aucune mention d'éléments spécifiques :hover fonctionne ou ne fonctionne pas avec.
    • Ce que la spécification d'ailleurs signifie probablement des choses comme les écrans tactiles, où le concept de hover est douteux, au mieux.
    InformationsquelleAutor Yzmir Ramirez
  5. 1

    Si cela ne fonctionne pas les essayer

    CSS:

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

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

    InformationsquelleAutor Chetan bane
  6. -7

    Essayer 

    .spoiler{
    display:none;

}
.spoiler:hover {
    display:block;
}
    • Ce serait semblable à ce problème dans la question initiale (dans le sens que vous ne pouvez pas passez la souris sur l'aileron de bloc), sauf marginalement pire, dans un display:none élément n'occupe pas tout l'espace dans la boîte de modèle à tous, donc certainement ne pourrait jamais être survolé.
    InformationsquelleAutor Nothingman