When input has :focus, dont trigger :hover styles

Question

I got a input which I styled with a :focus and :hover. When the input has :focus, I don't want to have the :hover style triggered when I hover over the input.

How am I supposed to style that?

My css is as follow:

.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

There's an specific CSS selector for this, the :not selector. And it has good compatibility:

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

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

I also suggest you give preference to the focus event, since it's somewhat more "static" than the hover state, with something like this:

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

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

And for a backwards-compatible alternative:

a:hover {    color: magenta;  }    a:focus {    color: cyan;  }    a:focus:hover {    color: cyan;  }

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

In simple words:

You have a rule for each state (magenta for hover and cyan for focus) and one for both, giving preference (visually) to the focus state: cyan.