我试图让一个框，弹出一个下拉菜单的一侧与当前悬停在选项内联。这并不容易解释，所以这里是一个工作示例（仅适用于Firefox）。 http://jsfiddle.net/WJaVz/21/检测选择选项的鼠标悬停在所有浏览器
香港专业教育学院尝试在Chrome和IE，但也不显得那么永远不会出现在预览框中识别选项的MouseEnter事件。我试图将事件更改为鼠标悬停并专注于他们喜欢它们的情况，但它仍然无法在IE和Chrome中使用。 （未经过测试的歌剧或Safari浏览器。）
一个想法是，也许使下拉列表成为一个无序列表，并使其看起来像一个下拉列表，我想我可以检测何时li有mouseenter事件。
有谁知道这是一个解决方案，因此它适用于大多数当前的浏览器，如果不是所有的人都没有重建最呢？
@ SubstanceD的解决方案是我找到的最好的解决方案，但它有一些可访问性问题，所以我重新使用它来使用单选按钮的字段集。
HTML：
<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>
CSS：
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;
}
JS：
$("#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();
});
感谢mcpDESIGNS，我曾尝试一些事情，但无济于事。我最终将其重建为无序列表。香港专业教育学院风格的名单看起来像一个下拉菜单，那么当用户鼠标悬停在无序列表李....这在所有浏览器上运行= WIN 8D
在这里，我可以很容易地检测代码如下：http://jsfiddle.net/CJbeF/22/
，如果我没有记错的话，你可以欺骗其他浏览器要知道什么时候的任何部分elect＆options是通过用div包装它并在那里做鼠标悬停来悬停的，但是我不认为你可以在没有创建自己的假选择式下拉菜单的情况下做到这一点。 –
看看这篇文章：http://stackoverflow.com/questions/1895476/how-to-style-a-select-dropdown-with-css-only-without-javascript它有很多的有关的缺陷信息'