hoverIntent는 select 요소에서 'out'함수를 트리거합니다.

Question

다음 코드는 메가 드롭 다운 표시 및 숨기기에 사용됩니다. 'dropDown'클래스의 링크에 마우스를 올려 놓으면 자식 '.dropPanel'이 표시됩니다. 마우스가 링크 또는 드롭 패널 위에있는 동안에는 드롭 패널이 계속 표시됩니다. 링크 또는 패널이 아닌 다른 위치로 커서를 이동하면 패널이 숨겨집니다. 아주 기본적인 것들.

일부 메가 드롭 다운에는 선택 요소가 포함되어 있습니다. Firefox에서는 모든 것이 잘됩니다. IE (8, 특히 다른 버전을 테스트하지 않은 경우)에서 드롭 패널의 select 요소에 마우스를 올리면 hoverIntent가 dropPanelOff()의 'out'함수를 실행하고 드롭 패널을 숨 깁니다.

어떻게 방지합니까?

 // Apply Hover Intent to Menu Panels 
     $(".dropDown").hoverIntent({ 
      sensitivity: 10, 
      interval: 150, 
      over: dropPanelOn, 
      timeout: 150, 
      out: dropPanelOff 
     }); 

      // Menu Over function call 
      function dropPanelOn() { 
       $('a[rel="dropLink"]', this).addClass('hover'); 
       $('.dropPanel', this).slideDown('fast'); 
      } 

      // Menu Out function call 
      function dropPanelOff() { 
       obj = this; 
       $('.dropPanel', this).slideUp(100, function(){ 
        $('a[rel="dropLink"]', obj).removeClass('hover'); 
        $('.dropLink span', obj).removeClass('hover'); 
       }); 
      } 

Answer 1

에 한번 코드에 이것을 추가 :

$(".dropDown select").mouseout(function(e) { 
     e.stopPropagation(); 
}); 

Answer 2

어쩌면 그냥 기본 호버 이벤트를 사용해야합니다, 당신은 또한에 지연을 추가 할 수 있습니다

이

var time = false; 
$(".dropDown").hover(function() { 
    if ($("dropPanel", this).is(":hidden")) $("dropPanel", this).slideDown('fast'); 
    else window.clearTimeout(timer); 
}, function() { 
    var obj = $(this); 
    timer = window.setTimeout(function() {obj.slideUp(100);}, 150); 
});