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


A veces, parece útil hacer que ciertos elementos de la página solo sean visibles, p. 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 antiguos, lo que le impide ocultar elementos en primer lugar hasta css2. (para un ejemplo js / jQuery cf. jquery mostrando elementos en vuelo estacionario)

Me pregunto si puede lograr esa característica de forma segura * con pure css3, usando :not(:hover) y :hover, que no afecta a los navegadores antiguos. Por lo que puedo ver, el requisito es que cada navegador compatible :not() debe apoyar :hover para todos los elementos. Según las siguientes fuentes, ese parece ser el caso

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.


32
2018-03-16 12:12


origen


Respuestas:


Su solución se ve bien para CSS3. No hay nada que se me ocurra para mejorar su solución para navegadores modernos como el opacity la propiedad 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 que no sean a. Como implica su pregunta, todos los navegadores compatibles :not() se sabe que también son totalmente compatibles :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) en total, por lo que su primer selector se vuelve menos específico en lugar de ser igualmente específico para su segundo selector con :hover, y puede comunicarse con IE7 e IE8 que no son compatibles :not() pero haz soporte :hover en todos los elementos visuales:

    div span.question {
        opacity: 0;
    }
    div:hover span.question {
        opacity: 1;
    }
    
  2. Utilizar el visibility propiedad en lugar de la opacity propiedad para llegar a IE7 e IE8 que no son compatibles con CSS3 opacity:

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

    Manten eso en mente visibility: hidden también 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. Use los combinadores CSS2 / 3 que IE6 no admite pero IE7 e IE8 do (niño >, hermano adyacente +hermano general ~) para ocultar ambas reglas de IE6. Esto limita con "hacky", pero su situación es una donde el combinador infantil >se adapta muy bien, por lo que puede integrarse orgánicamente en lugar de ser pirateado como el famoso html > body filtrar:

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

Fiddle actualizado


21
2018-03-16 12:28