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

Question

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 :not() doit supporter :hover pour tous les éléments. Selon les sources suivantes, qui semble être le cas

• http://www.quirksmode.org/css/contents.html
• http://kimblim.dk/css-tests/selectors/

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.

Answer 1

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 l' opacity de la 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 l'appui d' :hover sur des éléments autres que a. Comme le laisse entendre votre question, tous les navigateurs qui supportent :not() sont connus pour aussi soutenir pleinement :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 supportent pas l' :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 l' 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 de l'enfant ( >, à côté de la fratrie +, le général de la fratrie ~) pour le cacher à 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 célèbre html > body filtre:

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

Mis à jour le violon