Hover e Active solo quando non disabili

Io uso hover, attiva e disabile di pulsanti di stile.Hover e Active solo quando non disabili

Ma il problema è quando il pulsante è disattivato, il passaggio del mouse e gli stili attivi sono ancora validi.

Come applicare hover e attivo solo sui pulsanti abilitati?

2012-07-22 Ali

153

È possibile utilizzare :enabled pseudo-classe, ma preavviso IE<9 non la supporta:

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

fonte

2012-07-22 13:32:48 Engineer

mia app funziona solo in cromo quindi è tutto a posto. – Ali

C'è anche il selettore ': not()', ma poi di nuovo, è supportato solo da IE9. Vedi: https://developer.mozilla.org/en-US/docs/Web/CSS/:not – jnns

pulsante ': hover: enabled' non sembra funzionare nel mio caso. Utilizzo dell'emulazione IE9 sotto IE11. – Neolisk

Un modo è quello di aggiungere una classe partcular durante la disattivazione tasti e sovrascrivendo il hover e stati attivi per quella classe in css. O rimuovendo una classe quando si disabilita e si specifica l'hover e le pseudo proprietà attive su quella classe solo in css. Ad ogni modo, probabilmente non può essere fatto puramente con css, dovrai usare un po 'di js.

fonte

2012-07-22 13:37:26 techfoobar

Non voglio usare JS – Ali

Perché non utilizzare l'attributo "disabilitato" in css. Questo deve funzionare su tutti i browser.

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

fonte

2013-12-02 06:29:12 Madef

Coprire tutti gli stati disabilitati selezionandoli tutti in una riga: '.button [disabled], .button [disabled]: hover, .button [disabled]: focus, .button [ disabilitato]: attivo {} ' – DBK

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

Si può provare questo ..

fonte

2014-05-09 10:34:34

Questa è una buona soluzione per quando si desidera che lo stato" hover disabled "sia identico allo stato" non-hovered disabled ". –

I <3 questa soluzione. mi permette di avere il seguente: aleggia e

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

fonte

2014-09-19 21:42:14 jakeed1

Se si utilizza LESS o Sass, Si può provare questo:

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

fonte

2015-06-11 07:43:45 fatlinesofcode

Una specificità inferiore approccio che funziona nella maggior parte dei browser moderni (IE11 +, ed escludendo alcuni telefoni browser 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; 
}

Il pointer-events: none regola consente di disattivare hover; non è necessario aumentare la specificità con un selettore .btn[disabled]:hover per annullare lo stile di passaggio del mouse.

(FYI, questo è il semplice puntatore-eventi HTML, non le polemiche astraendo-Tastiere e Mouse pointer-events)

fonte

2016-09-19 15:48:46 michai

Hover e Active solo quando non disabili

risposta

Problemi correlati