Is: not (: hover) y: ¿se desplaza de forma segura para ocultar los elementos accesibles?

Question

A veces, parece útil hacer que ciertos elementos de la página solo sean visibles en, p. Ej. revolotea. 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, p. ocultando los elementos y haciéndolos disponibles 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 heredados, lo que le impide ocultar elementos en primer lugar hasta css2. (Para un JS/jQuery véase el ejemplo jquery showing elements on hover)

Me pregunto si se puede lograr una característica tan segura * con css3 puro, usando :not(:hover) y :hover, que no afecta a los navegadores antiguos. Por lo que puedo ver, el requisito es que cada navegador compatible con :not() debe admitir :hover para todos los elementos. De acuerdo a las siguientes fuentes, que parece ser el caso

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

Ejemplo aplicación: http://jsfiddle.net/LGQMJ/

¿Qué le parece? ¿Alguna objeción u otras fuentes?

* con seguridad me refiero a 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 opacity nunca será aplicada por navegadores que no la admitan de todos modos.

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

Dicho esto, terminas dejando IE7 e IE8 perdiendo el efecto de desplazamiento, el último de los cuales sigue siendo bastante frecuente.Probablemente usted está mirando para apoyar IE6 así, pero aquí es una solución que creo que va a abordar estas preocupaciones, si lo necesita:

1. Omitir :not(:hover) por completo por lo que su primer selector se vuelve menos específico en lugar de igualmente específicas para el segundo selector con :hover, y puede llegar a IE7 e IE8, que no son compatibles con :not() pero sí apoyo :hover en todos los elementos visuales:

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

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

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

   Tenga en cuenta que visibility: hidden hará un elemento invisible a mouseovers así, pero en este caso' volver a aplicarlo a un elemento secundario, por lo que el padre permanecerá visible para mouseover.

3. Uso CSS2/3 combinadores que IE6 no soporta pero IE7 y IE8 hacer (niño >, hermanos adyacentes +, hermano general ~) para ocultar ambas reglas de IE6. Este limita con "hacky", pero su situación es uno en el que el combinador niño > se ajusta muy bien, por lo que puede integrarse orgánicamente en lugar de hackeado en como el famoso html > body filtro:

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

Updated fiddle