如何在HTML選擇元素內關注焦點（從選項到選項）

Question

我試圖向用戶顯示額外的信息，因爲它們突出顯示了打開的select元素中的不同選項。

我使用select元素的keydown事件，並使用鍵盤（箭頭鍵）時使其工作。基本上我跟蹤用戶從選定項目走多遠和朝哪個方向。有了這些信息，我知道哪個選項被突出顯示。

我的問題是：如果用戶只是使用鼠標，我怎麼知道哪個選項被突出顯示？

Answer 1

這僅適用於FF：http://jsfiddle.net/umDNF/2/（下面的代碼也是如此）。您可能想要考慮使用自定義下拉菜單，而不是使用框。也許像這樣http://labs.abeautifulsite.net/jquery-selectBox/這裏有大量的鉤子來觸發你的信息顯示。

HTML：

<select> 
    <option data-info="Option one">1</option> 
    <option data-info="Option two">2</option> 
    <option data-info="Option three">3</option> 
    <option data-info="Option four">4</option> 
</select> 

<div class="metadata">Placeholder</div> 

Javscript（使用jquery）：

$('option').live('mouseenter', function(){ 
     $('.metadata').html($(this).attr('data-info'));   
    });