Странное поведение стилей (:hover), почему так происходит?

Question

[Сергей]

Делаю не стандартный выпадающий список. jsfiddle.net/bg5L3nzr/1
При клике вне текстового поля, все работает как надо, а вот если кликнуть в текстовое поле ввода, то примененный стиль "li:hover" остается. Что бы понять нужно пощелкать в примере.
Вопроса два почему так происходит, и как это пофиксить?

Answer 1

[GreatRash]

Из-за чего происходит:
Хз. Вероятно это баг браузера ибо в спеке ничего про данную ситуацию я не нашел.

Как пофиксить:
Я предположил, что т.к. внутри у вас находится input. который является генерируемым элементом, то когда у родителя меняется свойство display, этот самый input не обрабатывает событие mouseout, которое как раз необходимо, чтобы браузер снял эффект :hover.

Поэтому я решил отказаться от display: none; и вместо этого прятать элемент по другому:

.drop_list {
  position: relative;
  left: -999em;
}

.focus .drop_list {
  left: auto;
}

Вроде починилось. Но лучше всего отказаться от элементов input type="text" и использовать вместо этого связку span + input type="hidden".