Jquery 在所有浏览器中检测select选项的鼠标悬停

我试图让一个框弹出下拉菜单的一侧，与当前悬停的选项相关联。这不容易解释，所以这里有一个工作示例（仅适用于Firefox）

我曾在Chrome和IE上试用过，但似乎都无法识别该选项的鼠标事件，因此预览框永远不会出现。我曾尝试将事件更改为鼠标悬停和焦点，以防他们喜欢，但在IE和chrome中仍然不起作用。（尚未测试opera或safari。）

一个想法是把下拉列表做成一个无序的列表，让它看起来像一个下拉列表，我想我可以检测到李什么时候有鼠标事件

---

有人知道解决方案吗？如果不是所有浏览器都可以，那么它可以在大多数当前浏览器中工作，而不必重建大部分浏览器？

谢谢你的设计，我尝试了一些其他方法，但没有用。我最终把它重建成一个无序的列表。我把列表设计成一个下拉菜单，这样我就可以很容易地检测到用户鼠标在无序列表中的li上移动……这在所有浏览器中都有效=WIN 8D

---

代码如下：

@Subcented的解决方案是我找到的最好的解决方案，但它有一些可访问性问题，所以我重新设计了它，使用了一组单选按钮

html:

js:

---

问题是：

如果我没记错的话，你可以用div将select&options的任何部分括起来，然后在上面执行鼠标操作，从而愚弄其他浏览器，让它们知道select&options的任何部分何时处于悬停状态，但我认为，如果不创建自己的伪select-like下拉列表，你就无法做到这一点。查看这篇文章：它有很多关于

和

元素陷阱的详细信息，可能会帮助你解决这些问题

<div id="colourlist">red</div>
<fieldset id="colours">
  <label for="red">red<input type="radio" name="foo" id="red"/></label>
  <label for="blue">blue <input type="radio" name="foo" id="blue"/> </label>
  <label for="green">green<input type="radio" name="foo" id="green"/></label>   
  <label for="orange">orange<input type="radio" name="foo" id="orange"/></label>       
</fieldset>
<div id="preview"></div>

body{
    margin: 0;
    padding: 50px;
}
input {
    opacity:0;
}
label {
    display:block;
    height:20px;
}
#colourlist{
    position: absolute;
    border: 1px solid #B5B0AC;
    width: 200px;
    height: 21px;
    background: url('http://www.thermaxindia.com/images/dropdown_arrow.JPG') 180px 0 no-repeat;    
}
label:hover{
    background-color: #3399FF;
}
#colours{
   display: none;
   position: relative;
   top: 22px;
   left: 0;
   width: 200px;
   position: relative;
   border: 1px solid #B5B0AC;
   overflow-y: scroll;
   height:60px;
}
#preview{
   display: none;
   position: relative;
   background-color: #fff;
   border: 1px solid #ccc;
   padding: 10px;
   width: 250px;
   height: 30px;  
}

$("#colours label").on('mouseenter', function(){
    var O = $(this).offset();
    var CO = $("#colours").offset();
    $("#preview").css("top", O.top-150).show();
    $("#preview").css("left", CO.left+160);
    var text = $(this).text();
    $("#preview").css("background-color", text);
});
$("#colours input").on('click', function(){
    var text = $(this).attr("id");
    $("#colourlist").text(text);
    $("#colours").hide();
    $("#preview").hide(); 
});
$("#colourlist").on('click', function(e){
    e.stopPropagation();
    $("#colours").show();   
});
$("body").on('click',function(e){
    $("#colours").hide();
});