IE select issue with hover

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

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

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

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

источник

2010-09-13 MathGladiator

в какой версии IE вы говорите? –

в основном 7 и 8 (* edit *) – MathGladiator

Я не видел разницы между IE7 и Chrome –

Я не думаю, что есть чистый способ 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.

источник

2010-09-22 00:45:16 vassilis

Вот способ улучшитель выберите поведение в 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, который имеет прекрасный вид. Существует множество реализаций, которые вам могут понадобиться.

источник

2010-09-24 08:03:35

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

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

источник

2010-09-26 03:11:20 Knu

IE select issue with hover

ответ

Смежные вопросы