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

onmouseover and onmouseout jquery

Question

Tengo este script para ampliar un cuadro de texto al pasar el ratón sobre él y acortarlo en mouseoff.

El problema que estoy teniendo es que Internet Explorer no parece extenderse sobre las opciones de un cuadro de selección.

Esto significa que en IE puedo hacer clic en Seleccionar, tener las opciones desplegables, pero si intento seleccionar una, desaparecen y la caja de selección cambia de tamaño tan pronto como me muevo fuera 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>

¿Hay alguna solución para seleccionar cuadros 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 detener el inicio cuando el mouse ingresa en la parte desplegable del elemento.

Prueba 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 esto no es como se supone que uno debe usar jQuery, nunca lo había usado antes :))

Answer 2

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

Además, lo implementé en un menú que usa el plugin jquery de hoverIntent, sin problemas. (Sin interferencia).

Answer 3

La respuesta de WorldWideWeb funcionó a la perfección.

Tuve un problema levemente diferente, tuve un efecto de desplazamiento sobre el elemento que contenía (despliego para revelar un menú de selección) del campo de formulario y en IE los usuarios no pudieron seleccionarlo del menú desplegable (siguió restableciendo el valor). Agregué la sugerencia de worldwideweb (con la identificación del seleccionado) 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

Parece que esta publicación ha estado en funcionamiento por un tiempo, pero es de esperar que aún haya gente interesada en una solución alternativa. Experimenté este problema mientras construía un nuevo sitio en el que estoy trabajando. Se trata de un deslizador de productos, y para cada producto, al pasar el mouse 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. Rápidamente descubrí que cada vez que mi mouse dejaba el área visible inicial del menú de selección (es decir, tratando de seleccionar una opción), desaparecía toda la burbuja.

La respuesta (gracias, gente inteligente que desarrolló jQuery), fue todo sobre el burbujeo del evento. Sabía que la forma más directa de solucionar el problema tenía que ser "desactivar" temporalmente el estado del vuelo estacionario. Afortunadamente, jQuery tiene una funcionalidad incorporada para manejar el burbujeo del evento (lo llaman propagación).

Básicamente, con solo una línea más o menos de código nuevo, adjunté un método al evento "onmouseleave" del menú desplegable (el uso de más de una de las opciones en la lista de selección parece desencadenar este evento de manera confiable; probé algunos otros eventos , pero este parecía ser bastante sólido) que apagó la propagación del evento (es decir, los elementos padres no podían escuchar sobre el evento "onmouseleave" del menú desplegable).

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

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

Answer 5

Tenía un formulario oculto / mostrado basado en el vuelo estacionario. Si el usuario se centró en seleccionar, el formulario quedó oculto. Pude resolver mi problema con algo como esto:

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