マウスのホバースタイルが適用されているときに矢印キーのナビゲーションでリストアイテムに適用された選択されたクラスを削除します

Question

テキストボックスでUP/DOWN矢印キーを押すと、選択したクラスがリストアイテムに適用されます。リスト項目の上にマウスポインタを移動し、上下矢印キーを同時に押すと、ホバーと選択されたクラスの両方がリスト項目に適用されます。選択入力オプションに似たホバリングと選択されたクラスを切り替えるには？

http://jsfiddle.net/AyAZx/790/

$('#college').keyup(function(e) { 
 

 
    var $listItems = $('.field-wrap li'); 
 
    var key = e.keyCode, 
 
    $selected = $listItems.filter('.selected'), 
 
    $current; 
 

 
    $listItems.removeClass('selected'); 
 

 

 
    var menu = $('#college_list'); 
 
    var height = $selected.outerHeight(); 
 
    var top = menu.scrollTop(); 
 
    var menuHeight = menu[0].scrollHeight; 
 

 
    if (key == 40) // Down key 
 
    { 
 
    if (!$selected.length || $selected.is(':last-child')) { 
 
     $current = $listItems.eq(0); 
 
     menu.scrollTop(0); 
 
    } else { 
 
     $current = $selected.next(); 
 
     menu.scrollTop(top + height); 
 
    } 
 

 
    $current.addClass('selected'); 
 
    } 
 

 
    if (key == 38) // Up key 
 
    { 
 
    if (!$selected.length || $selected.is(':first-child')) { 
 
     $current = $listItems.last(); 
 
     menu.scrollTop(menuHeight + height); 
 
    } else { 
 
     $current = $selected.prev(); 
 
     menu.scrollTop(top - height); 
 
    } 
 
    $current.addClass('selected'); 
 
    } 
 

 
});

.field-wrap ul { 
 
    width: 93%; 
 
    margin-top: 1px; 
 
    border: 1px solid #3498DB; 
 
    position: absolute; 
 
    z-index: 9; 
 
    background: white; 
 
    list-style: none; 
 
    max-height: 100px; 
 
    overflow-y: auto; 
 
} 
 
.field-wrap ul li { 
 
    padding: 2px; 
 
    border: solid grey; 
 
    border-width: 0 0 2px 0; 
 
} 
 
.field-wrap ul li:hover { 
 
    background: #2980B9; 
 
}

<div class="field-wrap"> 
 
    <input type="text" id="college" placeholder="Name" required autocomplete="off" /> 
 
    <ul id="college_list"> 
 
    <li>abc</li> 
 
    <li>def</li> 
 
    <li>asdff</li> 
 
    <li>dasdf</li> 
 
    <li>asdef</li> 
 
    <li>asdf</li> 
 
    <li>asf</li> 
 
    <li>asdef</li> 
 
    </ul> 
 
</div>

Answer 1

私はこのケースでは、あなたがCSSを交換する必要があります怖い：のMouseMoveイベントに置く：ソリューションの

$('#college_list li').mousemove(function() { 
    $('.field-wrap li').removeClass('selected'); 
    $(this).addClass('selected'); 
});