Desplazar y Activo solo cuando no está deshabilitado

186

Uso hover , active y disabled para diseñar botones.

Pero el problema es que cuando el botón está desactivado, el desplazamiento y los estilos activos aún se aplican.

¿Cómo aplicar hover y activo solo en botones habilitados?

css

— Ali
fuente

329

Puede usar : pseudo-class habilitada , pero el aviso IE<9no lo admite :

button:hover:enabled{
    /*your styles*/
}
button:active:enabled{
    /*your styles*/
}

— Ingeniero
fuente

3

También está el :not()selector, pero, de nuevo, solo es compatible desde IE9 también. Ver: developer.mozilla.org/en-US/docs/Web/CSS/:not

— jnns

button:hover:enabledNo parece funcionar en mi caso. Usando la emulación IE9 bajo IE11.

— Neolisk

75

.button:active:hover:not([disabled]) {
    /*your styles*/
}

Puedes probar esto ...

— Velayutham Anjamani
fuente

Esta es una buena solución para cuando desea que el estado "deshabilitado por desplazamiento" se vea idéntico al estado "deshabilitado sin desplazamiento".

— Mikhael Loo

Yo <3 esta solución. me permite tener lo siguiente: <button class = "button"> pasa el mouse </button> y <button class = "button no-hover> no pasa el mouse </button> simplemente usando: not (.no-hover)

— Ben

35

¿Por qué no utilizar el atributo "deshabilitado" en CSS? Esto debe funcionar en todos los navegadores.

button[disabled]:hover {
    background: red;
}
button:hover {
    background: lime;
}

— Madef
fuente

13

Cubra todos los estados deshabilitados seleccionándolos todos en una línea:.button[disabled], .button[disabled]:hover, .button[disabled]:focus, .button[disabled]:active {}

— DBK

13

Un enfoque de menor especificidad que funciona en la mayoría de los navegadores modernos (IE11 +, y excluyendo algunos navegadores móviles Opera e IE - http://caniuse.com/#feat=pointer-events ):

.btn {
  /* base styles */
}

.btn[disabled]
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

.btn:hover {
  color: red;
}

La pointer-events: noneregla deshabilitará el desplazamiento; No necesitará aumentar la especificidad con un .btn[disabled]:hoverselector para anular el estilo de desplazamiento.

(Para su información, estos son los simples eventos de puntero HTML, no los polémicos eventos de puntero de dispositivos de entrada de abstracción)

— michai
fuente

12

En sass (scss):

 button {
  color: white;
  cursor: pointer;
  border-radius: 4px;

  &:disabled{
    opacity: 0.4;

    &:hover{
      opacity: 0.4;  //this is what you want
    }
  }

  &:hover{
    opacity: 0.9;
  }
}

— jakeforaker
fuente

10

Si está utilizando LESSo Sass, puede probar esto:

.btn {
  &[disabled] {
    opacity: 0.6;
  }
  &:hover, &:active {
    &:not([disabled]) {
      background-color: darken($orange, 15);
    }
  }
}

— fatlinesofcode
fuente

Esta es una buena solución en SASS ya que el efecto de desplazamiento se procesará para un botón deshabilitado a menos que lo envuelva en bloque.

— mbokil

2

Una forma es agregar una clase particular mientras deshabilita los botones y anula el desplazamiento y los estados activos para esa clase en css. O eliminar una clase al deshabilitar y especificar el desplazamiento y las pseudo propiedades activas en esa clase solo en css. De cualquier manera, es probable que no se pueda hacer únicamente con css, deberá usar un poco de js.

— techfoobar
fuente