Est :not(:hover) et :hover un moyen sûr pour cacher les éléments accessibles?

Parfois, il semble utile de faire de certains éléments de la page uniquement visible par exemple plane. Un exemple est stackoverflow du "feedback A ce poste utile pour vous?"-widget de. Comme ces éléments pourrait être crucial pour l'interface, comme un spectacle-sur-hover-fonctionnalité devrait être une amélioration progressive ou, en d'autres termes, discrète et dégrader gracieusement.

La manière habituelle semble être employant javascript, par exemple, de cacher les éléments et de les rendre disponibles lorsqu'un élément parent est planait. La raison de ce choix pourrait être :hover n'est pas un soutien pour tous les éléments en particulier dans les anciens navigateurs, ce qui vous interdire de cacher des éléments, en premier lieu, jusqu'à css2. (pour un js/jQuery exemple cf. jquery représentant des éléments sur le vol stationnaire)

Je me demande si vous pouvez atteindre une telle fonctionnalité en toute sécurité* avec de la pure css3, à l'aide de :not(:hover) et :hover, n'affectant pas les anciens navigateurs. Aussi loin que je peux voir, la condition est que chaque navigateur supportant les :not() doit prendre en charge :hover pour tous les éléments. Selon les sources suivantes, qui semble être le cas

Exemple de mise en œuvre: http://jsfiddle.net/LGQMJ/

Qu'en pensez-vous? Toute objection ou d'autres sources?

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

InformationsquelleAutor Richard Kiefer | 2012-03-16
  1. 22

    Votre solution semble bien pour le CSS3. Il n'y a pas quelque chose que je peux penser à améliorer votre solution pour les navigateurs modernes comme la opacity propriété ne sera jamais appliquée par les navigateurs qui ne supportent pas de toute façon.

    Il n'y a littéralement aucun autre navigateur en plus de IE6 et NN4 (et plus) sans prise en charge de :hover sur des éléments autres que a. Comme le laisse entendre votre question, tous les navigateurs qui prennent en charge :not() sont connus pour prennent entièrement en charge la :hover.

    Cela dit, en fin de compte vous laissant IE7 et IE8 absent dehors sur le hover effet, ce dernier qui est encore assez répandue. Vous êtes probablement à la recherche à l'appui de IE6, mais voici une solution que je crois qui va répondre à ces préoccupations, si vous en avez besoin:

    1. Omettre :not(:hover) au total donc, votre premier sélecteur devient moins précis plutôt que de tout aussi spécifiques à votre deuxième sélecteur :hover, et vous pouvez atteindre IE7 et IE8 qui ne le supportent pas :not() de soutien mais ne :hover sur tous les éléments visuels:

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

    2. Utiliser le visibility de la propriété au lieu de la opacity propriété pour rejoindre 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, un élément est invisible pour mouseovers en tant que bien, mais dans ce cas, vous êtes de l'appliquer à un élément d'enfant, de sorte que le parent reste visible à mouseovers.

    3. Utilisation CSS2/3 combinators que IE6 ne supporte pas, mais IE7 et IE8 ne (enfant >, à côté de la fratrie +, le général frère ~) pour masquer à la fois les règles de IE6. Ce frontières sur "hacky", mais votre situation est celle où l'enfant combinator > s'adapte très bien, de sorte qu'il peut être intégré de façon organique plutôt que piratés comme le fameux html > body filtre:

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

    Mis à jour le violon

    • Merci beaucoup, très détaillé IE plus. Cependant, nous pourrions reconsidérer l'opacité pour les lecteurs d'écran d'accessibilité: stackoverflow.com/questions/9056855/... et stackoverflow.com/questions/272360/... Comme dans mon cas, la fonction est juste un peu de sucre à l'interface, l'objectif principal était d'éviter de faire essentiel des éléments de l'interface inaccessibles dans n'importe quel navigateur. Avez-vous d'autres sources?
    • Pas vraiment, je vais ajouter un peu si je trouve de tout 🙂
    InformationsquelleAutor BoltClock