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>

我希望为mouseover的每个选项元素处理mouseleave和<select>事件（我不想处理鼠标悬停，选择的mouseleave事件）。我怎样才能做到这一点？

Answer 1

<option>本身不是可见元素。它只是<select>元素的数据，在大多数情况下，它使用本机O / S控件进行渲染。

AFAIK这是不可能做到的，至少不是跨浏览器的方式。它似乎在Firefox中有效。

编辑它实际上也适用于Webkit浏览器，但前提是<select>元素具有size属性，以便可以看到多个<option>

Answer 2

你可以这样做 - DEMO

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

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

更新：遗憾地适用于仅限Firefox

jquery处理mouseover mouseleave选项

2 个答案: