選択肢jqueryのmouseout

Question

私はテキストボックスとコンボボックスを持っています。テキストボックスに移動するには "mouseover"を押して、テキストボックスの非表示とコンボボックスの表示をします。そして、テキストボックスショーとコンボボックスは、 "マウスアウト"コンボボックスを隠す。しかし、私はそれが選択のオプションでマウスを動かすことができないため、できません。

<input type=text name="textbox" id="textbox"> 
<select id="combobox"> 
<option value = 1>1</option> 
<option value = 2>2</option> 
<option value = 3>3</option> 
</select> 

とJavaScript：

$("#combobox").mouseout(function(){ 
$("#combobox").hide(); 
$("#textbox").show(); 
}); 

感謝。

Answer 1

あなたは、ユーザーがmouseover<option> sのエドたかどうかを決定するための表示/非表示機能を遅らせるためにsetTimeout()を使用することができます。ここでは

$(function() { 

    //create a variable to store a reference to a timeout 
    var box_timer; 

    //bind an event handler for the `mouseout` event to the `#combobox` element 
    $("#combobox").mouseout(function(){ 

     //set a timeout to hide the `#combobox`, show the `#textbox`, and set the value of the `#textbox` to the value of the `#combobox` 
     box_timer = setTimeout(function() { 

      //hide the `#combobox` and get it's value 
      var box_val = $("#combobox").hide().val(); 

      //show the `#textbox` and set it's value 
      $("#textbox").val(box_val).show(); 
     }, 100); 

    //bind event handler to the `mouseover` event for the `#combobox` element 
    }).mouseover(function() { 

     //clear the timer because the user has move the cursor from a `#combobox > option` element to the `#combobox` element 
     clearTimeout(box_timer); 
    }); 

    //bind an event handler for the `mouseover` event on the `#textbox` element 
    $("#textbox").mouseover(function(){ 
     $("#combobox").show(); 
     $("#textbox").hide(); 

    //bind an event handler to all the `<option>` elements on the `mouseover` event 
    }).children().mouseover(function (event) { 

     //clear the timer because the user has move the cursor from a `#combobox > option` element or the `#combobox` element 
     clearTimeout(box_timer); 

    //bind an event handler to all the `<option>` elements on the `mouseout` event 
    }).mouseout(function() { 

     //set the timer to do the same thing as `mouseout`ing the `#combobox` element 
     box_timer = setTimeout(function() { 

      //trigger a `mouseout` event on the `#combobox` element 
      $('#combobox').trigger('mouseout'); 
     }, 100); 
    }); 
}); 

はjsfiddleです：http://jsfiddle.net/jasper/FNx2B/