JQuery / Javascript: IE hover no cubre las opciones del cuadro de selección?

Question

Tengo esta secuencia de comandos para ampliar un cuadro de texto con el mouseover y acortarlo con el mouseoff.

El problema que tengo es que Internet Explorer no parece extenderlo al pasar sobre las opciones de un cuadro de selección.

Esto significa que en IE puedo hacer clic en seleccionar, tener las opciones desplegadas, pero si intento seleccionar una, desaparecen y el cuadro de selección cambia de tamaño tan pronto como salgo del cuadro de selección.

Código de ejemplo:

<script type='text/javascript'>
$(function() {
$('#TheSelect').hover(
    function(e){
        $('#TheText').val('OVER');
        $(this).width( 600 );
    },
    function(e){
        $('#TheText').val('OUT');
        $(this).width( 50 );
   }
);
});
</script>

Y:

<input type='text' id='TheText' /><br /><br />

<select id='TheSelect' style='width:50px;'>
    <option value='1'>One</option>
    <option value='2'>Two</option>
    <option value='3'>Three</option>
    <option value='42,693,748,756'>Forty-two billion, six-hundred and ninety-three million, seven-hundred-forty-some-odd..... </option>
    <option value='5'>Five</option>
    <option value='6'>Six</option>
    <option value='7'>Seven...</option>
</select>

¿Existen soluciones alternativas para los cuadros de selección en IE? Incluso consideraría un reemplazo de jquery si alguien puede recomendar uno que sea realmente confiable.

¡Gracias!

Answer 1

Aparentemente, IE no considera la parte del bit desplegable del elemento seleccionado. Es factible, pero se necesita un poco de trampa con las propiedades de expansión y los eventos de desenfoque / enfoque para habilitar y deshabilitar el efecto 'ocultar' para evitar que se active cuando el mouse ingresa a la parte desplegable del elemento.

Prueba con esto:

$(function() {
    var expand   = function(){ $(this).width(600) }
    var contract = function(){ if (!this.noHide) $(this).width(50) }
    var focus    = function(){ this.noHide = true }
    var blur     = function(){ this.noHide = false; contract.call(this) }
    $('#TheSelect')
        .hover(expand, contract)
        .focus(focus)
        .click(focus)
        .blur(blur)
        .change(blur)
});

(Disculpas si no es así como se supone que uno debe usar jQuery, nunca lo he usado antes :))

Answer 2

Parece que esta publicación ha estado activa durante un tiempo, pero espero que todavía haya gente interesada en una solución. Experimenté este problema mientras construía un nuevo sitio en el que estoy trabajando. En él hay un control deslizante del producto, y para cada producto, pasar el ratón sobre el producto aparece una gran burbuja informativa con información sobre el producto, un menú desplegable para seleccionar opciones de compra y un botón de compra. Descubrí rápidamente que cada vez que mi mouse dejaba el área visible inicial del menú de selección (es decir, al intentar seleccionar una opción), la burbuja desaparecería.

La respuesta (gracias, amigos inteligentes que desarrollaron jQuery), fue todo acerca del evento. Sabía que la forma más sencilla de solucionar el problema tenía que ser temporalmente " deshabilitando " El estado de salida del hover. Afortunadamente, jQuery tiene una funcionalidad incorporada para lidiar con la propagación de eventos (lo llaman propagación).

Básicamente, con solo alrededor de una línea de código nuevo, adjunté un método al " onmouseleave " evento del menú desplegable (al pasar el mouse sobre una de las opciones en la lista de selección parece que se dispara este evento de manera confiable; probé algunos otros eventos, pero este parecía ser bastante sólido), lo que desactivó la propagación del evento (es decir, los elementos principales no estaban permitido escuchar sobre el evento " onmouseleave " del menú desplegable).

Eso fue todo! La solución era mucho más elegante de lo que esperaba. Luego, cuando el mouse abandona la burbuja, el estado de desactivación de la activación se activa normalmente y el sitio continúa con su negocio. Aquí está la solución (lo puse en el documento.ready):

$(document).ready(function(){
  $(".dropdownClassName select").mouseleave(function(event){
    event.stopPropagation();
  });
});

Answer 3

La respuesta de WorldWideWeb funcionó perfectamente.

Tuve un problema ligeramente diferente, tuve un efecto de desplazamiento sobre el elemento que contiene (desplaza el mouse para mostrar un menú de selección) del campo de formulario y en IE los usuarios no pudieron seleccionar desde el menú desplegable (se restableció el valor) . Agregué la sugerencia de worldwideweb (con el ID de la selección) y viola, funcionó.

HEre es lo que hice:

$(".containerClass").hover(function() {
    $(this).children("img").hide();
    $('#idOfSelectElement').mouseleave(function(event) { event.stopPropagation(); });
}, function() {
    $(this).children('img').show();
    $('#idOfSelectElement').mouseleave(function(event) { event.stopPropagation(); });

});

Answer 4

Tuve un formulario que estaba oculto / se muestra en función del desplazamiento. Si el usuario se centraba en la selección, el formulario quedaba oculto. Pude resolver mi problema con algo como esto:

element.find('select').bind('mouseenter mouseleave',function(){
    //Prevent hover bubbling
    return false;
});

Answer 5

Tenía el mismo problema, y ??la respuesta de WorldWidewebb funcionó muy bien en IE8. Acabo de hacer un ligero cambio, eliminando " seleccionar " desde el selector, ya que incluí la clase del cuadro de selección en el selector. Lo hizo una solución muy simple.

Además, lo tuve implementado en un menú que utiliza el complemento de jquery hoverIntent, sin problemas. (No hay interferencia).