Is: not (: hover) et: survoler un moyen sûr de cacher des éléments accessibles?

Question

Parfois, il semble utile de rendre certains éléments de la page uniquement visibles, par ex. plane. Un exemple est le "retour d'informations de stackoverflow - Ce message vous a-t-il été utile?" - widget. Étant donné que ces éléments peuvent être cruciaux pour l'interface, une telle fonctionnalité de démonstration devrait être une amélioration progressive ou, en d'autres termes, discrète et se dégrader avec élégance.

La manière habituelle semble être d'utiliser javascript, par ex. cacher les éléments et les rendre disponibles quand un élément parent est plané. La raison de ce choix pourrait être :hover ne supporte pas tous les éléments, en particulier dans les navigateurs existants, vous interdisant ainsi de cacher des éléments en premier lieu à css2. (Pour un js/exemple jQuery voir jquery showing elements on hover)

Je me demande si vous pouvez obtenir une telle fonctionnalité en toute sécurité * avec CSS3 pur, en utilisant :not(:hover) et :hover, sans incidence sur les navigateurs plus anciens. Pour autant que je puisse voir, l'exigence est que chaque navigateur supportant :not() doit prendre en charge :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/

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

Que pensez-vous? Des objections ou d'autres sources?

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

Answer 1

Votre solution semble bien 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 supportent pas de toute façon.

Il n'y a littéralement aucun autre navigateur hormis IE6 et NN4 (et plus ancien) sans le support pour :hover sur les éléments autres que a. Comme implicite dans votre question, tous les navigateurs qui prennent en charge :not() sont connus pour également prendre entièrement en charge :hover. Cela dit, vous finissez par laisser IE7 et IE8 passer à côté de l'effet Hover, ce dernier étant encore assez répandu.Vous êtes probablement pour soutenir IE6 aussi, mais voici une solution qui, je crois répondre à ces préoccupations, si vous en avez besoin:

1. Omettre :not(:hover) tout à fait de sorte que votre premier sélecteur devient un peu moins précis que tout aussi spécifique votre second sélecteur avec :hover, et vous pouvez atteindre à IE7 et IE8 qui ne prennent pas en charge :not() mais suportent :hover sur tous les éléments visuels:

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

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

   ainsi

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

   Gardez à l'esprit que visibility: hidden fera un élément invisible pour mouseovers, mais dans ce cas, vous » re l'appliquant à un élément enfant, le parent restera visible pour les survols.

3. Utilisez CSS2/3 combinateurs que IE6 ne supporte pas, mais IE7 et IE8 faire (enfant >, frères et soeurs à côté +, frère général ~) pour cacher les règles de IE6. Cette frontière sur « aki », mais votre situation est celle où l'enfant Combinator > va très bien, il peut être intégré organique plutôt que piraté comme le fameux filtre html > body:

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

Updated fiddle