hoverIntent desencadena la función 'out' en el elemento seleccionado

Question

El código que sigue se usa para mostrar y ocultar mega desplegables. Si pasa el mouse sobre un enlace con la clase de 'dropDown', se muestra '.dropPanel'. Mientras el mouse esté sobre el enlace o sobre el panel desplegable, el panel desplegable permanecerá visible. Mueva el cursor a cualquier lugar menos el enlace o el panel, y el panel está oculto. Bastante básico.

En algunos de estos Mega Dropdowns hay formularios que contienen elementos seleccionados. En Firefox, todo está bien. En IE (8 específicamente, no se han probado otras versiones), si pasa el mouse sobre un elemento seleccionado en el panel desplegable, hoverIntent desactiva la función 'out' de dropPanelOff() y se oculta el panel desplegable.

¿Cómo puedo evitar esto?

 // 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

Trate de añadir esto a su código:

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

Answer 2

tal vez usted sólo debe utilizar el evento activable nativa, se puede añadir un retardo a ella también:

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); 
});