When input has :focus, dont trigger :hover styles

by

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="https://stackoverflow.com/questions/24923647/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="https://stackoverflow.com/questions/24923647/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="https://stackoverflow.com/questions/24923647/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.

Leave a Comment

tech