select perd le focus lorsque la souris est plus d'options

Question

Je suis en train de faire un effet de vol stationnaire comme suit:

<div>Some Text</div> 

doit être remplacé par un <select> sur mouseover. dès que la souris quitte cette sélection, elle doit afficher la valeur précédemment affichée ou la nouvelle valeur sélectionnée.

Malheureusement, le mouseleave est appelé lorsque vous ouvrez la liste déroulante pour sélectionner certaines options et je ne peux pas le faire fonctionner. Est-ce que quelqu'un a déjà eu ce problème et connaît la solution?

<div id="text">Some Text</div> 
<select id="selector" style="display: none"> 
<option value="1" selected="selected">Some Text</option> 
<option value="2">Some More</option> 
<option value="3">Some Other</option> 
</select> 

jQuery:

$("#text").mouseover(function() 
{ 
    $(this).hide(); 
    $("#selector").show(); 
}); 

$("#selector").mouseleave(function() 
{ 
    $(this).hide(); 
    $("#text").show(); 
}); 

Quelqu'un peut-il me faire savoir comment je peux vous assurer que le mouseleave n'est pas appelée lorsque quelqu'un ouvre la sélection et plane sur les options?

BTW: Il fonctionne lorsque le bouton de la souris est pressé lors de la sélection

Answer 1

Je pense que vous devez utiliser les changements et les événements flou pour ce faire: de cette façon

var hidesel=function() 
{ 
    $(this).hide(); 
    $("#text").show(); 
} 
$("#selector").change(hidesel).blur(hidesel); 

la sélection volonté être masqué lorsque l'utilisateur clique sur une option ou clique en dehors de la sélection. Je pense que c'est aussi plus pratique.

Answer 2

Avez-vous essayé d'utiliser l'événement hover()?

$("#text").hover(
function() { 
    $(this.hide(); 
    $("#selector").show(); 
}, 
function() { 
    $(this).hide(); 
    $("#text").show(); 
}); 

Answer 3

envelopper dans un emballage <div> et définissez les gestionnaires d'événements sur ce

Working Demo

jQuery

$("#wrapper").mouseover(function() 
{ 
    $("#text").hide(); 
    $("#selector").show(); 
}); 

$("#wrapper").mouseleave(function() 
{ 
    $("#selector").hide(); 
    $("#text").show(); 
}); 

$("#selector").change(function() { 
    var value = $(this).val(); 
    $("#text").text($("option[value='"+value+"']", this).text()); 

}); 

HTML

<div id="wrapper"> 

    <div id="text">Some Text</div> 
    <select id="selector" style="display: none"> 

     <option value="1" selected="selected">Some Text</option> 
     <option value="2">Some More</option> 
     <option value="3">Some Other</option> 

    </select> 

</div>