Javascript 如何在HTML select元素中跟踪焦点（从一个选项到另一个选项）

当用户在打开的选择元素中突出显示不同的选项时，我试图向用户显示额外的信息

我正在使用select元素的keydown事件，并在使用键盘箭头键时使其工作。基本上，我跟踪用户从所选项目出发的距离和方向。有了这些信息，我知道哪个选项突出显示

我的问题是：如果用户只使用鼠标，我如何知道哪个选项突出显示？

这只适用于FF：下面的代码也适用。您可能需要考虑使用自定义下拉列表，而不是框。也许像这样，有很多钩子可以触发你的信息显示

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>

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