¿Es: not (: hover) y: hover una forma segura de ocultar elementos accesibles?

Question

¿Es: not (: hover) y: hover una forma segura de ocultar elementos accesibles?

A veces parece útil hacer que ciertos elementos de la página solo sean visibles en, por ejemplo, los flotadores. Un ejemplo es "feedback - Was this post useful to you?"-widget. Como esos elementos pueden ser cruciales para la interfaz, tal función de visualización al pasar el ratón debe ser una mejora progresiva o, en otros términos, discreta y degradarse con gracia.

La forma habitual parece ser emplear javascript, por ejemplo, ocultando los elementos y poniéndolos a disposición cuando un elemento padre está flotando. La razón de esa elección podría ser :hover no es compatible con todos los elementos, especialmente en navegadores heredados, por lo que le prohíbe ocultar elementos en primer lugar hasta css2. (para un ejemplo de js/jQuery cf. jquery mostrando elementos en hover )

Me pregunto si puede lograr tal característica de forma segura* con css3 puro, utilizando :not(:hover) y :hover, sin afectar a los navegadores más antiguos. Por lo que puedo ver, el requisito es que cada navegador que soporte :not() debe soportar :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

css css-selectors css3 hover progressive-enhancement

Author: Community, 2012-03-16

Source

1 answers

score 21 · Accepted Answer

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

Literalmente no hay otro navegador aparte de IE6 y NN4 (y anteriores) sin soporte para :hover en elementos que no sean a. Como se implica en su pregunta, todos los navegadores que admiten :not() son conocidos por ser totalmente compatibles con :hover.

Dicho esto, terminas dejando IE7 y IE8 perdiendo el efecto de flotación, el último de los cuales sigue siendo bastante frecuente. Probablemente estés buscando apoyar IE6 también, pero aquí hay una solución que creo que abordará estas preocupaciones, si lo necesitas:

Omita :not(:hover) por completo para que su primer selector se vuelva menos específico en lugar de igualmente específico para su segundo selector con :hover, y puede comunicarse con IE7 e IE8 que no son compatibles con :not() pero sí con :hover en todos los aspectos visuales elementos:
```
div span.question {
    opacity: 0;
}
div:hover span.question {
    opacity: 1;
}
```
Use la propiedad visibility en lugar de la propiedad opacity para comunicarse con IE7 e IE8 que no admiten CSS3 opacity:
```
div span.question {
    visibility: hidden;
}
div:hover span.question {
    visibility: visible;
}
```
Tenga en cuenta que visibility: hidden también hará que un elemento sea invisible para los mouseovers, pero en este caso lo está aplicando a un elemento hijo, por lo que el padre permanecerá visible para los mouseovers.
Use combinadores CSS2 / 3 que IE6 no admite pero IE7 e IE8 sí (hijo >, hermano adyacente +, general sibling ~) para ocultar ambas reglas de IE6. Esto raya en "hacky", pero su situación es una en la que el combinador infantil > encaja muy bien, por lo que puede integrarse orgánicamente en lugar de hackearse como el famoso filtro html > body:
```
div > span.question {
    visibility: hidden;
}
div:hover > span.question {
    visibility: visible;
}
```

Fiddle actualizado