Quando l'input ha: focus, non attivare: stili di hover

Question

Ho ottenuto un input che ho in stile con un :focus e :hover. Quando l'input è :focus, non desidero avere lo stile :hover attivato quando si passa il mouse sopra l'input.

Come dovrei stile quello?

mio css è la seguente:

.form-control:hover { 
    border-color: #a9a9a9; 
} 

.form-control:focus { 
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 2px rgba(102,175,233,.6); 
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 2px rgba(102,175,233,.6); 
} 

Answer 1

trucco veloce: aggiungere un bordo: #FFFFFF 0px solido .Form-control: concentrarsi

Answer 2

Rimozione del confine a fuoco funziona:

.form-control:hover { 
    border-color: #a9a9a9; 
} 
.form-control:focus { 
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 2px rgba(102, 175, 233, 0.6); 
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 2px rgba(102, 175, 233, 0.6); 
    border: none; 
} 

Oppure impostare il bordo su trasparente a fuoco per non avere la forma 'salta'.

.form-control:hover { 
    border-color: #a9a9a9; 
} 
.form-control:focus { 
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 2px rgba(102, 175, 233, 0.6); 
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 2px rgba(102, 175, 233, 0.6); 
    border-color: rgba(0, 0, 0, 0); 
} 

vedere qui: http://codepen.io/TheNathanG/pen/eCtiu

Answer 3

Una soluzione è quella di utilizzare pointer-events: none dichiarazione in cui ingresso ha :focus: http://jsfiddle.net/kbLP9/.

.form-control:focus { 
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 2px rgba(102,175,233,.6); 
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 2px rgba(102,175,233,.6); 
    pointer-events: none; 
} 

Un'altra soluzione è quella di combinare pseudo-classi :focus e :hover per ottenere l'effetto desiderato: http://jsfiddle.net/7LbNV/.

.form-control:focus:hover { 
    border-color: initial; 
} 

Answer 4

C'è un selettore CSS specifica per questo, il selettore :not. E ha good compatibility:

a:hover:not(:focus) { 
 
    color: magenta; 
 
} 
 

 
a:focus:not(:hover) { 
 
    color: cyan; 
 
}

<a href="example.com">Stackoverflow</a>

suggerisco anche di dare la preferenza alla manifestazione focus, dal momento che è un po 'più "statico" che lo stato hover, con qualcosa di simile:

a:hover:not(:focus) { 
 
    color: magenta; 
 
} 
 

 
a:focus { 
 
    color: cyan; 
 
}

<a href="example.com">Stackoverflow</a>

E per un'alternativa retro-compatibile:

a:hover { 
 
    color: magenta; 
 
} 
 

 
a:focus { 
 
    color: cyan; 
 
} 
 

 
a:focus:hover { 
 
    color: cyan; 
 
}

<a href="example.com">Stackoverflow</a>

In parole semplici:

Hai una regola per ogni stato (magenta per hover e ciano per focus) e uno per entrambi, dando la preferenza (visivamente) allo stato focus: ciano.

Answer 5

Basta aggiungere un :not(:focus) per la regola :hover in questo modo:

.form-control:hover:not(:focus) { 
    border-color: #a9a9a9; 
} 

Se il supporto del browser è un problema (come :not() non è supportata in IE8 e inferiore), si avrà probabilmente solo scrivere una nuova regola combinando :hover e :focus per sostituire la regola :hover con un valore di colore hard-coded (come valore iniziale di border-color, currentColor, non è supportato in IE8 e abbassare o):

.form-control:hover { 
    border-color: #a9a9a9; 
} 

.form-control:hover:focus { 
    border-color: /* Default border color depending on your layout */; 
}