将鼠标悬停在选择列表中的<option>上

Question

我试图在将鼠标悬停在选择列表中的选项上时显示说明,但是,我无法在悬停时识别代码.

相关代码:

选择表格块:

<select name="optionList" id="optionList" onclick="rankFeatures(false)" size="5"></select>
<select name="ranks" id="ranks" size="5"></select>

操作选择(先前定义的数组):

function rankFeatures(create) {

    var $optionList = $("#optionList");
    var $ranks = $("#ranks");

if(create == true) {
    for(i=0; i<5; i++){
        $optionList.append(features[i]);
    };
}
else {
    var index = $optionList.val();
    $('#optionList option:selected').remove();
    $ranks.append(features[index]);
};

}

这一切都有效.当我试图处理悬停在选项上时,这一切都崩溃了:

$(document).ready( 

function (event) {
$('select').hover(function(e) {
    var $target = $(e.target);
    if($target.is('option')) {
        alert('yeah!');
    };
})
})

我在通过Stack Exchange搜索时发现了代码,但我没有运气让它工作.单击选项时发出警报.如果我不移动鼠标并通过按Enter键关闭警报,它就会消失.如果我用鼠标关闭,则会弹出第二个警告窗口.只是偶尔在选择周围移动鼠标会弹出一个警告框.我已尝试直接定位选项,但在此方面收效甚微.如果我将鼠标悬停在选项上,如何弹出警报？

谢谢阅读!

Answer 1

您可以使用该mouseenter活动.

而且您不必使用所有这些代码来检查元素是否是一个option.

只需使用.on()语法委托给select元素.

$(document).ready(function(event) {
    $('select').on('mouseenter','option',function(e) {
        alert('yeah');
        // this refers to the option so you can do this.value if you need..
    });
});

演示http://jsfiddle.net/AjfE8/