Passa il mouse e attivo solo quando non disabilitato

186

Uso il passaggio del mouse , attivo e disabilitato per disegnare i pulsanti.

Ma il problema è quando il pulsante è disabilitato, il passaggio del mouse e gli stili attivi si applicano ancora.

Come applicare hover e attivo solo sui pulsanti abilitati?

css

— Ali
fonte

329

Puoi usare : pseudo-classe abilitata , ma avviso IE<9non lo supporta :

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

— Ingegnere
fonte

3

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

— jnns

button:hover:enablednon sembra funzionare nel mio caso. Utilizzo dell'emulazione IE9 in IE11.

— Neolisk

75

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

Puoi provare questo ..

— Velayutham Anjamani
fonte

Questa è una buona soluzione per quando si desidera che lo stato "disabilitato al passaggio del mouse" sia identico allo stato "disabilitato al passaggio del mouse".

— Mikhael Loo,

Ho <3 questa soluzione. mi permette di avere: <button class = "button"> hovers </button> e <button class = "button no-hover> non passa il mouse </button> semplicemente usando: not (.no-hover)

— Ben

35

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

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

— Madef
fonte

13

Copri tutti gli stati disabilitati selezionandoli tutti in una riga:.button[disabled], .button[disabled]:hover, .button[disabled]:focus, .button[disabled]:active {}

— DBK

13

Un approccio con specificità inferiore che funziona nella maggior parte dei browser moderni (IE11 + ed escludendo alcuni browser Opera e IE mobili - 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: noneregola disabilita il passaggio del mouse; non sarà necessario aumentare la specificità con un .btn[disabled]:hoverselettore per annullare lo stile al passaggio del mouse.

(Cordiali saluti, questi sono i semplici eventi-puntatore HTML, non i controversi eventi-puntatore-input-input-dispositivi)

— Michai
fonte

12

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

— jakeforaker
fonte

10

Se stai usando LESSo Sass, puoi provare questo:

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

— fatlinesofcode
fonte

Questa è una buona soluzione in SASS poiché l'effetto hover verrà elaborato per un pulsante disabilitato a meno che non lo avvolgi in un blocco.

— mbokil,

2

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

— techfoobar
fonte