javascript - 使用箭头键悬停

Question

在我的元素中，我将 li 标签动态添加到 ul 元素，然后当焦点位于 textarea 元素上时，我尝试每当用户按下向下箭头键时，都会在第一个li元素上生成悬停效果。不知怎的，我的努力没有发挥作用。

到目前为止我尝试过的代码如下:

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