哈弗使用箭头键

Question

在我的项目，我动态地添加li标签ul元素，然后当焦点textarea元素上，我试图生成每当用户按下down arrow key第一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