css - before - Is: not(: hover) y: ¿se mueve de forma segura para ocultar los elementos accesibles?

after css image

Question

A veces, parece útil hacer que ciertos elementos de la página solo sean visibles, por ejemplo, sobre los hover. Un ejemplo es el widget "feedback - was this post useful to you?" De stackoverflow. Como esos elementos pueden ser cruciales para la interfaz, dicha función de mostrar-en-hover debería ser una mejora progresiva o, en otros términos, discreta y degradarse con gracia.

La forma habitual parece ser el uso de javascript, por ejemplo, ocultar los elementos y ponerlos a disposición cuando un elemento principal está suspendido. El motivo de esa elección podría ser :hover no es compatible con todos los elementos, especialmente en los navegadores antiguos, lo que le impide ocultar elementos en primer lugar hasta css2. (para un ejemplo js / jQuery, vea jquery que muestra elementos en el aire )

Me pregunto si puede lograr esa característica de forma segura * con css3 puro, usando :not(:hover) y :hover , sin afectar a los navegadores más antiguos. Por lo que puedo ver, el requisito es que todos los navegadores compatibles con :not() deben admitir :hover para todos los elementos. Según las siguientes fuentes, ese parece ser el caso

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

Ejemplo de implementación: http://jsfiddle.net/LGQMJ/

¿Qué piensas? ¿Alguna objeción u otras fuentes?

* con seguridad quiero decir que el navegador siempre debe mostrar todos los elementos como último recurso.

Answer 1

Su solución se ve bien para CSS3. No hay nada que se me ocurra para mejorar su solución para navegadores modernos, ya que la propiedad de opacity nunca será aplicada por navegadores que no la soporten de todos modos.

Literalmente, no hay otro navegador además de IE6 y NN4 (y anterior) sin soporte para :hover el :hover sobre elementos que no sean a . Como se sugiere en su pregunta, todos los navegadores compatibles con :not() también son compatibles con :hover .

Dicho esto, terminas dejando IE7 e IE8 perdiendo el efecto de desplazamiento, el último de los cuales todavía es bastante frecuente. Probablemente esté buscando soportar IE6 también, pero esta es una solución que creo que resolverá estas preocupaciones, si la necesita:

1. Omitir :not(:hover) completo para que su primer selector sea menos específico y no tan específico para su segundo selector con :hover , y puede acceder a IE7 e IE8 que no son compatibles :not() pero support :hover en todos los elementos visuales:

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

2. Utilice la propiedad de visibility lugar de la propiedad de opacity para llegar a IE7 e IE8 que no son compatibles con la opacity CSS3:

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

   Tenga en cuenta que visibility: hidden hará que un elemento sea invisible para mouseover, pero en este caso lo está aplicando a un elemento secundario, por lo que el elemento primario permanecerá visible para mouseover.

3. Utilice los combinadores CSS2 / 3 que IE6 no admite, pero IE7 e IE8 sí (hijo > , hermano adyacente + , hermano general ~ ) para ocultar ambas reglas de IE6. Esto raya en "hacky", pero su situación es una donde el combinador infantil > adapta muy bien, por lo que puede integrarse orgánicamente en lugar de ser pirateado como el famoso filtro html > body :

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

Fiddle actualizado