Cuando la entrada tiene: enfoque, no active: estilos de desplazamiento

Obtuve una entrada que diseñé con un :focus y :hover. Cuando la entrada tiene :focusno quiero tener el :hover El estilo se activa cuando paso el mouse sobre la entrada.

¿Cómo se supone que debo diseñar eso?

Mi css es el siguiente:

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

Hay un selector de CSS específico para esto, el :not selector. Y tiene buena compatibilidad:

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

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

<a href="https://stackoverflow.com/questions/24923647/example.com">Stackoverflow</a>

También te sugiero que le des preferencia a la focus evento, ya que es algo más “estático” que el estado flotante, con algo como esto:

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

a:focus {
  color: cyan;
}

<a href="https://stackoverflow.com/questions/24923647/example.com">Stackoverflow</a>

Y para una alternativa compatible con versiones anteriores:

a:hover {
  color: magenta;
}

a:focus {
  color: cyan;
}

a:focus:hover {
  color: cyan;
}

<a href="https://stackoverflow.com/questions/24923647/example.com">Stackoverflow</a>

En palabras simples:

Tienes una regla para cada estado (magenta para hover y cian para focus) y uno para ambos, dando preferencia (visualmente) al focus estado: cian.

Simplemente agregue un :not(:focus) para usted :hover regla así:

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

Si la compatibilidad con el navegador es un problema (como :not() no es compatible con IE8 y versiones anteriores), probablemente solo tendrá que escribir una nueva regla que combine :hover y :focus para anular el :hover regla con un valor de color codificado (como el valor inicial de border-color, currentColorno es compatible con IE8 y versiones anteriores tampoco):

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

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

Eliminar el borde en el foco funciona:

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

O establezca el borde en transparente en el foco para que no tenga la forma ‘saltar’.

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

Mira aquí: http://codepen.io/TheNathanG/pen/eCtiu

Una solución es usar pointer-events: none declaración cuando la entrada tiene :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;
}

Otra solución es combinar pseudo-clases :focus y :hover para lograr el efecto deseado: http://jsfiddle.net/7LbNV/.

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

truco rápido: agrega un borde: sólido 0px #FFFFFF a .form-control:focus