web-dev-qa-db-fra.com

Is: not (: hover) et: hover un moyen sûr de masquer les éléments accessibles?

Parfois, il semble utile de rendre certains éléments de page uniquement visibles, par exemple sur plane. Un exemple est la "rétroaction de stackoverflow - ce post vous a-t-il été utile?" - widget. Étant donné que ces éléments peuvent être cruciaux pour l'interface, une telle fonctionnalité d'affichage en vol stationnaire devrait être une amélioration progressive ou, en d'autres termes, discrète et se dégrader gracieusement.

La manière habituelle semble utiliser javascript, par exemple masquer les éléments et les rendre disponibles lorsqu'un élément parent est survolé. La raison de ce choix pourrait être que :hover N'est pas compatible avec tous les éléments, en particulier dans les navigateurs hérités, vous interdisant ainsi de masquer les éléments en premier lieu jusqu'à css2. (pour un exemple js/jQuery cf. jquery montrant des éléments en survol )

Je me demande si vous pouvez réaliser une telle fonctionnalité en toute sécurité * avec css3 pur, en utilisant :not(:hover) et :hover, Sans affecter les navigateurs plus anciens. Pour autant que je puisse voir, l'exigence est que tout navigateur prenant en charge :not() doit prendre en charge :hover Pour tous les éléments. Selon les sources suivantes, cela semble être le cas

Exemple d'implémentation: http://jsfiddle.net/LGQMJ/

Qu'est-ce que tu penses? Des objections ou d'autres sources?

* en toute sécurité, je veux dire que le navigateur doit toujours afficher tous les éléments en dernier recours.

csscss3hovercss-selectorsprogressive-enhancement
32
Richard Kiefer

Votre solution semble correcte pour CSS3. Il n'y a rien que je puisse penser pour améliorer votre solution pour les navigateurs modernes car la propriété opacity ne sera jamais appliquée par les navigateurs qui ne la prennent pas en charge de toute façon.

Il n'y a littéralement aucun autre navigateur que IE6 et NN4 (et plus ancien) sans prise en charge de :hover Sur des éléments autres que a. Comme l'indique votre question, tous les navigateurs prenant en charge :not() sont également connus pour prendre en charge entièrement :hover.

Cela dit, vous finissez par laisser IE7 et IE8 passer à côté de l'effet de survol, ce dernier étant encore assez répandu. Vous cherchez probablement à prendre en charge IE6 également, mais voici une solution qui, je crois, répondra à ces préoccupations, si vous en avez besoin:

  1. Omettez :not(:hover) pour que votre premier sélecteur devienne moins spécifique plutôt qu'également spécifique à votre deuxième sélecteur avec :hover, et , vous pouvez atteindre IE7 et IE8 qui ne prennent pas en charge :not() mais prennent en charge :hover sur tous les éléments visuels:

    div span.question {
    opacity: 0;
}
div:hover span.question {
    opacity: 1;
}

  2. Utilisez la propriété visibility au lieu de la propriété opacity pour atteindre IE7 et IE8 qui ne prennent pas en charge CSS3 opacity:

    div span.question {
    visibility: hidden;
}
div:hover span.question {
    visibility: visible;
}

    Gardez à l'esprit que visibility: hidden Rendra également un élément invisible aux survols, mais dans ce cas, vous l'appliquez à un élément enfant, donc le parent restera visible aux survols.

  3. Utilisez les combinateurs CSS2/3 que IE6 ne prend pas en charge, mais IE7 et IE8 le font (enfant >, Frère adjacent +, Frère général ~) Pour masquer les deux règles d'IE6. Cela frise le "hacky", mais votre situation est celle où le combinateur enfant > S'intègre très bien, il peut donc être intégré de manière organique plutôt que piraté comme le célèbre filtre html > body:

    div > span.question {
    visibility: hidden;
}
div:hover > span.question {
    visibility: visible;
}

violon mis à jour

22
BoltClock