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

Desplazar y Activo solo cuando no está deshabilitado

Respuestas: