2014-11-05 16 views
9

Ho bisogno di disabilitare il passaggio del mouse su un particolare pulsante (non su tutti i pulsanti) nell'intero DOM. Per favore fatemi sapere come raggiungerlo usando una classe CSS.CSS disable hover effect

sto usando la sotto classe CSS quando il mio pulsante è disabilitato. ora voglio rimuovere l'effetto hover usando la stessa classe.

.buttonDisabled 
{ 
Cursor:text !important; Text-Decoration: None !important; 
} 

La suddetta classe si occuperà di rimuovere il segno della mano e il testo sottolineato al passaggio del mouse. Ora voglio anche rimuovere l'effetto hover. Per favore mi faccia sapere.

+1

Quali proprietà sono impostate sull'elemento? Colore di sfondo? –

+0

Di quale "effetto hover" stai parlando? –

+0

chiarisci la tua domanda – Rasel

risposta

4

add seguente per aggiungere effetto hover sul pulsante disattivato

.buttonDisabled:hover 
    { 
     /*your code goes here*/ 
    } 
2

Per disattivare l'effetto hover, ho due suggerimenti:

  • se il vostro effetto hover è innescata da JavaScript, basta usare $.unbind('hover');
  • se il vostro stile hover viene attivato per classe, poi basta usare $.removeClass('hoverCssClass');

L'utilizzo dei CSS !important per sovrascrivere i CSS renderà il CSS molto sporco, quindi il metodo non è raccomandato. Puoi sempre duplicare uno stile CSS con un nome di classe diverso per mantenere lo stesso stile.

2

Dalla tua domanda tutto quello che posso capire è che hai già un effetto hover sul tuo pulsante che vuoi rimuovere. Per quello o rimuovi quel css che causa l'effetto hover o lo sostituisce.

per superiori, fare questo

.buttonDisabled:hover 
{ 
    //overriding css goes here 
} 

Per esempio, se i cambiamenti di colore di sfondo del pulsante al passaggio del mouse dal rosso al blu. Nei css sovrascriventi lo farai diventare rosso in modo che non cambi.

Anche passare attraverso tutte le regole di scrittura e override dei CSS. Prendi familiarità con ciò che css avrà quale priorità.

Buona fortuna.

14

Ho una soluzione davvero semplice per questo.

basta creare una nuova classe

.noHover{ 
    pointer-events: none; 
} 

e utilizzare questa opzione per disattivare ogni caso su di esso. usarlo come:

<a href='' class='btn noHover'>You cant touch ME :P</a> 
+3

Bene, disabilita anche tutti i tipi di eventi sull'elemento. In questo scenario, tutto il pulsante diventerebbe invalicabile. –

+0

Sì, questo disabiliterà tutti gli eventi utente su questo elemento –

+0

Migliore regola CSS. Grazie mille. Non ero a conoscenza di questo. –