鼠标在选择选项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/