使用箭头键悬停

Question

在我的项目中，我将li 标签动态添加到ul 元素，然后当焦点位于textarea 元素上时，我试图在用户的第一个li 元素上生成悬停效果按down arrow key。不知何故，我的努力没有奏效。

目前我尝试的代码如下：

JS Fiddle

HTML

<textarea id="result" rows="4" cols="50"></textarea>
<ul class="autoComplete"></ul>

---

CSS

.autoComplete li {
    background-color:#E1E1E1;
    cursor: hand;
    cursor: pointer;
}
.autoComplete li:hover {
    background-color:#BDBDBD;
}

---

js

var result = $('#result');
var autoComplete = $('.autoComplete');
result.keydown(function (event) {
    if (event.keyCode == 40) {
        if (autoComplete.children('li').length > 0) {
            console.log('down');

            //should work with IE
            autoComplete.children(":first").focus().hover();
        }
    }
});

PS：解决办法应该是跨浏览器（IE8+）

Answer 1

试试

CSS

.autoComplete li {
    background-color:#E1E1E1;
    cursor: hand;
    cursor: pointer;
}
.autoComplete li.hover {
    background-color:#BDBDBD;
}

JS

var result = $('#result');
var autoComplete = $('.autoComplete');
result.keyup(function (event) {
    console.log('keydown');
    if (event.keyCode == 40) {
        if (autoComplete.children('li').length > 0) {
            console.log('down');

            //should work with IE
            autoComplete.children(":first").mouseenter();
        }
    }
});

autoComplete.on('mouseenter', 'li', function(){
    $(this).addClass('hover');
}).on('mouseleave', 'li', function(){
    $(this).removeClass('hover');
});

演示：Fiddle