鼠標在選擇選項jquery

Question

我有一個文本框和一個組合框。我想要文本框隱藏和組合框顯示當我「鼠標懸停」去文本框。然後當「mouseout」組合框出現時，文本框顯示和組合框隱藏。但我不能因爲它不能移動鼠標在選擇的選項。

<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

您可以使用setTimeout()延遲顯示/隱藏功能，以確定用戶是否具有mouseover版的<option> S：

$(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/