Наведите курсор на <option> в списке выбора

Я пытаюсь показать описание при наведении указателя мыши на параметр в списке выбора, однако у меня возникают проблемы с распознаванием кода при наведении курсора.

Соответствующий код:

Выберите кусок формы:

<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, оно исчезает. Если я закрою мышью, появится второе окно с предупреждением. Простое перемещение мыши вокруг выбора иногда приводит к появлению окна предупреждения. Я пытался нацеливаться на варианты напрямую, но с этим ничего не получалось. Как получить всплывающее предупреждение, если я наведу курсор мыши на опцию?

Спасибо за чтение!

Ответы на вопрос(6)

Ваш ответ на вопрос