Hover y activa sólo cuando no desactivado

utilizo vuelo estacionario, activa y discapacitados al estilo de botones.Hover y activa sólo cuando no desactivado

Pero el problema es que cuando el botón está deshabilitado, el fl ash y los estilos activos siguen vigentes.

¿Cómo aplicar el control deslizante y activo solo en los botones habilitados?

Fuente

2012-07-22 Ali

153

Puede utilizar :enabled pseudo-clase, pero aviso IE<9 no lo soporta:

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

Fuente

2012-07-22 13:32:48 Engineer

Mi aplicación sólo funciona en cromo por lo que todo está bien. – Ali

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

'botón: hover: enabled' no parece funcionar en mi caso. Usando la emulación IE9 bajo IE11. – Neolisk

Una forma es añadir una clase partcular al deshabilitar botones y anulando el vuelo estacionario y estados activos de 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 solo con CSS, tendrás que usar un poco de JS.

Fuente

2012-07-22 13:37:26 techfoobar

No deseo usar JS – Ali

¿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; 
}

Fuente

2013-12-02 06:29:12 Madef

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

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

Puede probar este ..

Fuente

2014-05-09 10:34:34

Esta es una buena solución para cuando quiere que el estado" hover disabled "se vea idéntico al estado" no desactivado ". –

I <3 esta solución. me permite tener lo siguiente: cierne y Ben

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; 
    } 
}

Fuente

2014-09-19 21:42:14 jakeed1

Si está utilizando LESS o Sass, Usted puede intentar esto:

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

Fuente

2015-06-11 07:43:45 fatlinesofcode

A menor especificidad enfoque que funciona en la mayoría de los navegadores modernos (EI11 +, y la exclusión de algunos navegadores móviles Opera & 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 regla pointer-events: none inhabilitará vuelo estacionario; no será necesario aumentar la especificidad con un selector .btn[disabled]:hover para anular el estilo de desplazamiento.

(FYI, esto es el simple puntero-eventos HTML, no los contenciosos-dispositivos de entrada-abstracción-puntero eventos)

Fuente

2016-09-19 15:48:46 michai

Hover y activa sólo cuando no desactivado

Respuesta

Cuestiones relacionadas