Как решить конфликт псевдоклассов :hover и :focus?

Question

[Gustov]

https://jsfiddle.net/9671x2oo/3/

При наведении мышки на строку поиска, для лупы(псевдоэлемента) срабатывает свойство {color: #fff;} , при фокусе на строке поиска для лупы(псевдоэлемента) должно срабатывать свойство {color: #6a7180;}, но он не срабатывает так как на это поле уже наведена мышка и действует свойство {color: #fff;}, если убрать мышку из поля поиска при активно фокусе, лишь тогда мы увидим срабатывание свойства {color: #6a718} .

Как решить проблему? Необходимо добиться срабатывания свойства {color: #6a718} при фокусе на строке и наведенной в этот момент мышки.

Answer 1

[Pretor DH]

.find:hover {
color: #fff;
}
.find:focus:hover, .find:focus {
color: #6a7180;
}

JSfiddle

Comments

[Gustov]

То ли я дурак, то ли лыжи не едут. Не заработало.

[Pretor DH]

Вот решение твоей задачи
https://jsfiddle.net/pretordh/9671x2oo/6/

[Gustov]

Pretor DH: спасибо за помощь! Буду разбираться!)