如何顯示鼠標懸停的選擇框選項？

Question

我有一個下拉選擇框，它有一些選項。當我們點擊下拉菜單時，下拉菜單展開，並顯示所有選項。

但我想用mouserover而不是點擊這個功能。

我想顯示鼠標懸停的所有選項。任何對此有所瞭解的人？

修訂

我使用styledSelect jQuery插件。現在這個插件將html選擇框轉換爲基於div和li的選擇框。 Here is the plugin documentation

Answer 1

我知道這不完全是你想到的，但它可能是在正確的方向。

function toggleSelectBox(selbox) { 
    if (selbox.size > 1) { //HIDE: 
     selbox.size = 1; 
     selbox.style.position = 'static'; 
    } else { //SHOW: 
     selbox.size = selbox.options.length; 
     selbox.style.position = 'absolute'; 
     selbox.style.height = 'auto'; 
    } 
} 


<select id="type" name="type" onmouseout="toggleSelectBox(this)" onmouseover="toggleSelectBox(this)"> 
    <option value="">opt1</option> 
    <option value="">opt2</option> 
    <option value="">opt3</option> 
</select> 

Answer 2

您需要使用CSS來實現您的任務。你不能用古典的html選擇框來完成它。這裏是你想要的example。

Answer 3

我認爲你只能使用你的選擇作爲DOM樹的一部分來構建一些mouseOver drop div，這個「選項」信息可以作爲select子項訪問。所以我認爲你只能模擬mouseOver上的選擇。

Answer 4

另一件事，您引用您的腳本文件的順序也扮演一個角色，而不是在您添加對您創建的js文件的引用以覆蓋該函數之前使用jquery文件。它會工作，但不是在Safari瀏覽器出於某種奇怪的原因