哈弗使用箭頭鍵

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