:hover, pero:no en una clase específica


¿Cómo puedo aplicar un efecto hover a un elemento a, pero no a un elemento a con la clase active?

a:hover(not: .active)

Parece que falta algo.

Author: Jürgen Paul, 2012-02-11

2 answers

La notación funcional está en :not(), no :hover:

a:not(.active):hover

Si prefieres poner :hover primero, está bien:

a:hover:not(.active)

No importa qué pseudo-clase sea la primera o la última; de cualquier manera, el selector funciona igual. Resulta que es mi convención personal poner :hover último, ya que tiendo a colocar pseudo-clases de interacción de usuario detrás de pseudo-clases estructurales.

 116
Author: BoltClock,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-06-04 04:33:40

Usted tiene la opción de utilizar el not() selector.

a:not(.active):hover { ... }

Sin embargo, esto puede no funcionar en todos los navegadores, ya que no todos los navegadores implementan las características de CSS3.

Si se dirige a un público grande y desea admitir navegadores antiguos, la mejor manera sería definir un estilo para .active:hover y deshacer lo que esté haciendo en a:hover.

 6
Author: Mendhak,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-06-12 07:45:30