jquery - jquery 处理 mouseover mouseleave 选项

Question

我有以下问题：

我有一个这样的选择菜单：

<select id="selectClass" name="bookClass" data-native-menu="false" data-mini="true">
    <option selected="selected" value="A">CLASS A</option>
    <option value="B">CLASS B</option>
    <option value="C">CLASS C</option>
    <option value="D">CLASS D</option>
</select>

我想为每个选项元素处理mouseoverandmouseleave事件<select>（我不想为选择处理 mouseover、mouseleave 事件）。我怎样才能做到这一点？

Answer 1

An<option>本身不是可见元素。它只是一个<select>元素的数据，在大多数情况下是使用本机 O/S 控件呈现的。

AFAIK 这不能完成，至少不能以跨浏览器的方式完成。它似乎在 Firefox 中工作。

编辑它实际上也可以在 Webkit 浏览器中工作，但前提是<select>元素具有一个size属性，这样多个属性<option>是可见的。

Answer 2

你可以做到 -演示

$("option").on("mouseover", function(e) {
    e.stopPropagation();

    $("p").text( $(this).val() );
});

更新：遗憾的是仅在Firefox中有效