JQuery / Javascript: IE hover не охватывает параметры поля выбора?

По-видимому, IE не учитывает раскрывающуюся битовую часть элемента выбора. Это выполнимо, но нужно немного обмануть свойства expando и события размытия / фокуса, чтобы включить и отключить эффект «скрытия», чтобы он не срабатывал, когда мышь входит в раскрывающуюся часть элемента.

Попробуй это:

$(function() {
    var expand   = function(){ $(this).width(600) }
    var contract = function(){ if (!this.noHide) $(this).width(50) }
    var focus    = function(){ this.noHide = true }
    var blur     = function(){ this.noHide = false; contract.call(this) }
    $('#TheSelect')
        .hover(expand, contract)
        .focus(focus)
        .click(focus)
        .blur(blur)
        .change(blur)
});

(Приносим извинения, если jQuery использовать не так - я никогда не использовал его раньше :))

Похоже, этот пост был опубликован уже давно, но, надеюсь, есть люди, заинтересованные в обходном пути. У меня возникла эта проблема при создании нового сайта, над которым я работаю. На нем есть слайдер продукта, и для каждого продукта при наведении указателя мыши на продукт появляется большой информационный пузырь с информацией о продукте, раскрывающийся список для выбора вариантов покупки и кнопка покупки. Я быстро обнаружил, что всякий раз, когда моя мышь покидает начальную видимую область меню выбора (т. Е. Пытается выбрать вариант), весь пузырек исчезает.

Ответ (спасибо, умные люди, разработавшие jQuery) был о всплытии событий. Я знал, что самый простой способ решить проблему - это временно "отключить" состояние выключения при наведении курсора. К счастью, jQuery имеет встроенную функциональность для борьбы с всплыванием событий (они называют это распространением).

По сути, имея только строку или около того нового кода, я прикрепил метод к событию "onmouseleave" в раскрывающемся списке (наведение указателя мыши на один из вариантов в списке выбора, похоже, надежно запускает это событие - я пробовал несколько других событий , но этот казался довольно надежным), который отключал распространение событий (то есть родительским элементам не разрешалось слышать о событии onmouseleave из раскрывающегося списка).

Вот и все! Решение оказалось гораздо более элегантным, чем я ожидал. Затем, когда мышь покидает пузырек, состояние зависания срабатывает нормально, и сайт продолжает заниматься своими делами. Вот исправление (я положил его в document.ready):

$(document).ready(function(){
  $(".dropdownClassName select").mouseleave(function(event){
    event.stopPropagation();
  });
});

Была та же проблема, и ответ WorldWidewebb очень хорошо работал в IE8. Я просто сделал небольшое изменение, убрав «select» из селектора, так как я включил в селектор класс поля выбора. Сделал это действительно простым исправлением.

Кроме того, я без проблем реализовал его в меню, в котором используется плагин jquery hoverIntent. (Без помех).

Ответ WorldWideWeb сработал отлично.

У меня была немного другая проблема: у меня был эффект наведения на содержащий элемент (наведите указатель мыши, чтобы открыть меню выбора) поля формы, а пользователи IE не могли выбрать из раскрывающегося списка (он продолжал сбрасывать значение). Я добавил предложение globalweb (с идентификатором выбора) и альт, это сработало.

Вот что я сделал:

$(".containerClass").hover(function() {
    $(this).children("img").hide();
    $('#idOfSelectElement').mouseleave(function(event) { event.stopPropagation(); });
}, function() {
    $(this).children('img').show();
    $('#idOfSelectElement').mouseleave(function(event) { event.stopPropagation(); });

});

У меня была форма, которая была скрыта / отображена при наведении курсора. Если пользователь сфокусировался на выборе, форма скрывалась. Я смог решить свою проблему примерно так:

element.find('select').bind('mouseenter mouseleave',function(){
    //Prevent hover bubbling
    return false;
});