JQuery/Javascript: IE hover ne couvre pas les options de boîte de sélection?

Question

J'ai ce bit de script pour élargir une zone de texte sur mouseover et le raccourcir au mouseoff.

Le problème que j'ai est que Internet Explorer ne semble pas étendre son survol sur les options d'une boîte de sélection. Cela signifie que dans IE, je peux cliquer sur la sélection, faire dérouler les options, mais si j'essaie d'en sélectionner une, elles disparaissent et la boîte de sélection se redimensionne dès que je quitte la boîte de sélection elle-même.

Exemple de code:

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

Et:

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

Existe-t-il des solutions de contournement pour sélectionner les boîtes dans IE? Je considérerais même un remplacement de jquery si n'importe qui peut recommander celui qui est vraiment fiable.

Merci!

Answer 1

Apparemment, IE ne considère pas la partie de bit déroulant de l'élément select. C'est faisable, mais il faut un peu de tricher avec les propriétés expando et les flous/focus pour activer et désactiver l'effet 'hide' pour l'arrêter quand la souris entre dans la partie déroulante de l'élément.

un aller avec ceci:

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

(Toutes mes excuses si ce n'est pas comment on est censé utiliser jQuery - Je ne l'ai jamais utilisé avant :))

Answer 2

Ressemble ce poste Cela fait un bout de temps, mais j'espère qu'il y a encore des gens intéressés par une solution de contournement. J'ai rencontré ce problème en construisant un nouveau site sur lequel je travaille. Il s'agit d'un curseur de produit, et pour chaque produit, la souris sur le produit affiche une grande bulle d'information avec des informations sur le produit, une liste déroulante pour sélectionner les options d'achat, et un bouton d'achat. J'ai rapidement découvert que chaque fois que ma souris quittait la zone visible initiale du menu de sélection (c'est-à-dire en essayant de sélectionner une option), la bulle entière disparaissait.

La réponse (merci, gens intelligents qui ont développé jQuery), était tout au sujet de l'événement bouillonnant. Je savais que la façon la plus simple de résoudre le problème devait être de désactiver temporairement l'état de sortie du vol stationnaire. Heureusement, jQuery a une fonctionnalité intégrée pour gérer les bulles d'événements (ils l'appellent la propagation). Fondamentalement, avec seulement environ une ligne ou plus de nouveau code, j'ai attaché une méthode à l'événement "onmouseleave" de la liste déroulante (souris sur l'une des options dans la liste de sélection semble déclencher cet événement de manière fiable - j'ai essayé quelques autres événements, mais celui-ci semblait assez solide) qui désactivait la propagation d'événements (c.-à-d. que les éléments parents n'étaient pas autorisés à entendre parler de l'événement «onmouseleave» dans la liste déroulante).

C'était tout! La solution était beaucoup plus élégante que ce à quoi je m'attendais. Ensuite, lorsque la souris quitte la bulle, l'état de sortie du hover se déclenche normalement et le site poursuit son activité. Voici la solution (je l'ai mis dans le document.ready):

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

Answer 3

eu le même problème et la réponse de WorldWidewebb fonctionne très bien sur IE8. Je viens de faire un léger changement, en supprimant "select" du sélecteur, puisque j'ai inclus la classe de la boîte de sélection dans le sélecteur. Fait une solution vraiment simple.

Aussi, je l'avais mis en œuvre sur un menu qui utilise le plugin jquery hoverIntent, sans aucun problème. (Pas d'interférence).

Answer 4

WorldWideWeb de réponse a parfaitement fonctionné. J'ai eu un problème légèrement différent, j'ai eu un effet de survol sur l'élément contenant (planer pour révéler un menu de sélection) du champ de formulaire et sur IE les utilisateurs ne pouvaient pas choisir à partir du menu déroulant (il a continué à réinitialiser la valeur). J'ai ajouté la suggestion de WorldWideWeb (avec l'ID de la sélection) et l'alto, il a travaillé.

VOICI ce que je faisais:

$(".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 5

j'avais une forme qui était caché/présentée en fonction de vol stationnaire. Si l'utilisateur a porté sur la sélection de la forme est devenue cachée. J'ai pu résoudre mon problème avec quelque chose comme ceci:

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