IE выбрать проблему с зависанием - PullRequest
Новая
       14

IE выбрать проблему с зависанием

8 голосов
/ 13 сентября 2010

Мой друг и я пытаемся обойти IE (7/8). Мы построили канонический пример здесь:

http://www.mathgladiator.com/share/ie-select-bug-hover-css-menus.htm

Используя меню CSS, мы бы хотели, чтобы в них были выделенные элементы. Однако в IE меню исчезает, когда вы взаимодействуете с полем выбора. Мы считаем, что это связано с ошибкой в ​​том, как выбор влияет на события.

Есть ли обходной путь? По крайней мере, с чистым хаком CSS или DOM?

Ответы [ 3 ]

8 голосов
/ 22 сентября 2010

Я не думаю, что есть чистый способ CSS обойти это.Это связано с очень распространенной ошибкой в ​​том, как IE обрабатывает события в элементах выбора.

Однако вы можете обойти это с помощью Javascript: 

<script type="text/javascript">
    $(document).ready(function () {
        $('.nav_element a').mouseover(function() {
            $('.submenu').hide();
            $(this).parent().find('.submenu').show();
        });

        $('.submenu').mouseover(function() {
            $(this).show();
        });

        $('.submenu').mouseout(function (e) {
            // Do not close if going over to a select element
            if (e.target.tagName.toLowerCase() == 'select') return;
            $(this).hide();
        });

    });    
</script>

Приведенный выше код использует jQuery.

1 голос
/ 24 сентября 2010

Вот способ улучшить поведение выбора в IE7 / 8, но это не решает проблему

Изменить DOCTYPE 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

Добавитьскрипт 

<script>

    function ddlOut(e) {
        setTimeout(function() { e.className = e.className.replace(' over', ''); }, 1000)
    }

</script>

Добавить CSS 

    #nav .over div.submenu
    {
         display: block;
    }

    #nav .nav_element{
        behavior: expression(
            this.onmouseover = new Function("this.className += ' over'"),
            this.onmouseout = new Function("ddlOut(this)"),
            this.style.behavior = null
        );
    }

Это будет работать лучше, по крайней мере, но, конечно, не идеально.

Мой советэто изменить выбор элемента управления на HTML-эквивалент.Я использую OboutDropDown , который имеет хороший вид.Существует множество реализаций, которые могут удовлетворить ваши потребности.

0 голосов
/ 26 сентября 2010

Сначала вам нужно развернуть поверхность: hover под вашим меню.
Итак, в вашей CSS добавьте width:310px;height:220px к #nav .nav_element a.
(также добавьте класс или идентификатор для второго div, стилизованного с помощью top:220px)

Теперь вам просто нужно смоделировать mousedown , запускаемый при нажатии на выбранном элементе, который остановится, когда будет сделан выбор между вариантами - вы можетевероятно, сделайте последнюю часть, если вы проверите для onfocus состояние выбора, которое остановит mousedown.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...