我試圖讓一個框，彈出一個下拉菜單的一側與當前懸停在選項內聯。這並不容易解釋，所以這裏是一個工作示例（僅適用於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它有很多的有關的缺陷信息'