При наведении курсора на выпадающий список все заканчивается: состояния наведения в IE

Question

Взгляните на эту небольшую демонстрацию: http://jsfiddle.net/TnzS4/

Откройте окно SELECT и наведите на него выпадающий список.

В Chrome, FF, Safari и Opera,поле имеет красный цвет, что означает, что состояние :hover все еще активно.

В IE поле имеет серый цвет, что означает, что состояние :hover неактивно.

Этоошибка IE?

Редактировать: Пожалуйста, откройте вышеуказанную страницу в вашей версии IE и сообщите (через комментарий), есть ли у вас такое поведение или нет.

Answer 1

Я все еще вижу эту проблему.Я использую IE 8, и проблема есть.@treeface, вы используете сборку 8.0.6001.18702?@ Шиме, вы больше не видите проблемы в IE8?

Я был тем, кто первоначально довел это до сведения Шиме, и поэтому я хотел бы вновь открыть этот вопрос, чтобы, возможно, выяснить, почему мой Internet Explorer имеет этовопрос, а кажется, что никого другого нет?

Итак, действительно , у вас всех нет этой проблемы?

Согласно моей панели разработчиков IE, эта проблема существует для меня в режиме браузера: IE8, IE7 иСовместимость с IE8.Также тестируется с различными режимами документов (стандарты IE7, стандарты IE8, режим Quirks), но все они дают ту же ошибку.

Answer 2

Я мог бы также превратить это в ответ, так как я не могу действительно закрыть это, учитывая, что это совершенно правильный вопрос.Как обнаружил Эндрю Сер, эта проблема, похоже, не возникает в IE <= 7.Я подтвердил, что этого не происходит в IE8, а затем обнаружил, что этого не происходит в последнем выпуске предварительного просмотра платформы IE9.Таким образом, я думаю, что мы можем связать это с временной ошибкой в ​​бета-канале IE9 (хотя сложно назвать что-то «каналом», когда последний релиз был почти 3 месяца назад). </p>

Хорошая находка, Šime.

---

Редактировать : Когда я впервые прочитал этот вопрос, я полностью пропустил часть о том, как вы сначала должны открыть окно выбора, а затем навести курсор наопции.Когда это происходит, кажется, что все версии IE (включая последнюю версию IE9 для предварительного просмотра платформы) не считают div внизу находящимся в состоянии :hover.Все это связано с тем, что IE по-прежнему обрабатывает события в элементе select.Печальный факт в том, что не существует чистого способа CSS обойти это.Вам нужно будет манипулировать событиями в JavaScript.

Плохая новость в том, что это поможет вам пройти часть пути.Учтите это:

http://jsfiddle.net/TnzS4/5/

$('#wrap > select').focus(function() {
    $('#wrap').addClass('wrap_hover');
}).blur(function() {
    $('#wrap').removeClass('wrap_hover');
});

Здесь вы не теряете :hover при наведении курсора на элементы option, но также не пропускаете :hover при наведении мыши на элемент #wrap.Если это поведение для вас неприемлемо, вы не будете рады узнать, что вам придется тестировать IE в вашем JS, потому что в противном случае этот код будет дублировать поведение во всех браузерах.

Так что я полагаюВот так выглядит тупик.Если бы я был на вашем месте, я бы либо проигнорировал проблему (если бы кто-нибудь пожаловался, я бы сказал им не использовать браузер с дерьмом), либо избавился бы от эффекта :hover и нашел бы другой способ достичь любой цели пользовательского интерфейсавы пытаетесь достичь.