Ошибка IE при наведении курсора мыши на выбор и параметры

#css #internet-explorer #dojo #hover

#css #internet-explorer #dojo #наведите

Вопрос:

Я пытаюсь навести курсор на div, но при наведении курсора на параметр это влияет на наведение курсора div.

Пример кода:

 <div class="levelThreeMenuColumnTwo" id="clientFormMenu">
    <div class="formMenuPFS">
        <select name="select1">
            <option value="TN">
                Tennessee
            </option>
            <option value="VA" selected="selected">
                Virginia
            </option>
            <option value="WA">
                Washington
            </option>
            <option value="FL">
                Florida
            </option>
            <option value="CA">
                California
            </option>
        </select>
    </div>
 </div>
<style>
.formMenuPFS{
    display:none;
    background-color:red;
    width:110px;
    height:110px;
    position:absolute;
    left:200px;
}
.levelThreeMenuColumnTwo:hover .formMenuPFS{
    display:block;
}
.levelThreeMenuColumnTwo{
    display:block;
    background-color:green;
    width:200px;
    height:200px;
}
</style>

Woking в FF, но не в IE.

Правильное поведение: при наведении курсора на зеленый div отображается красный div. При наведении курсора на select или option продолжает отображаться красный div.

Если требуется javascript, я могу использовать dojo 1.4. Спасибо.

1. с какими версиями IE вы тестируете?

2. Можете ли вы показать, что у вас есть на данный момент (приведенный выше код) в JS Bin , убедившись, что он все еще работает в Firefox и все еще ломается в IE?

3. Все версии IE. jsbin.com/aralak . Код — это только приведенный выше код, который вы можете скопировать и вставить в html-документ и протестировать.

Ответ №1:

Я знаю, что это старая проблема, но у меня была та же проблема, которую я исправил следующим образом в вашем jsbin. Вместо использования CSS: hover я использовал наведение курсора jQuery и добавил event.stopPropagation() слишком select .

JS

 $(document).ready(function(){
    $(".levelThreeMenuColumnTwo").hover(function() {
        $('.formMenuPFS').show();
        $('.formMenuPFS select').mouseleave(function(event) { event.stopPropagation(); });
    }, function() {
        $('.formMenuPFS').hide();
        $('.formMenuPFS select').mouseleave(function(event) { event.stopPropagation(); });
    });
});

jsbin
http://jsbin.com/xitafazoca /

1. ваше добавление обработчиков событий в ваш обработчик событий, вероятно, не то, что вы хотите

2. Ну, поскольку вы тоже хотите отменить событие mouseLeave при наведении курсора на этот конкретный div. Я думаю, это то, что вы хотите в этой ситуации.

3. но mouseleave событие с stopPropogation нужно прикрепить только один раз, и тогда оно всегда будет перехватывать mouseleave. Его не нужно повторно подключать каждый раз, levelThreeMenuColumnTwo когда он зависает на

4. Ах, я вижу, вы можете создать пример того, как вы могли бы прикрепить его только один раз в этом примере? Я не могу придумать способ сам atm, который бы