如何使用键盘事件模拟悬停

Question

我有以下 HTML 模板，其中列表项被动态添加到下拉列表中。

<button class="btn btn-default btn-sm dropdown" (keydown)="triggerTraverse($event)"></button>
    <fa-list-filler>
        <li *ngFor="let item of items [class.active]="checkItem(item,selectedItem)">
            <span (click)="doNavigate()" class="cookie"></span>
        </li>
    </fa-list-filler>

我有以下列表项的悬停样式：

li > .cookie {
        cursor: pointer;
        &:hover{
            background-color: 'yellow';
        }
    }

当我用鼠标悬停这些列表项时，我可以看到应用于列表项的悬停样式，即在这种情况下我可以看到黄色背景颜色。

默认情况下，第一个项目被选中，即它的类处于活动状态。然后，当用户按下向下箭头键时，活动类保持在同一个位置，但悬停状态应该向下移动到下一个列表项，然后移动到下一个项目，并且应该环绕。

我实现了以下方法，但无法正确处理后续元素。

triggerTraverse(evt: KeyboardEvent){
   if(evt.keyCode === 27){
    closeDropdown();
}else if(evt.keyCode === 40){
    let initialEle = document.querySelector('li.active');
initialEle.nextElementSibling.firstElementChild.classList.add('hoverstyle');
}
}

hoverstyle 是我刚刚实现的另一个类，用于将背景色添加到元素中。

.hoverstyle{
 background-color: 'pink';
}

谁能帮忙。

Answer 1

跟踪所选索引并使用ngClass 指令。

例如：

模板：

<input ... (keydown)="onKeydown($event)">
<div *ngFor="let option of options; let i = index;"
     (mouseover)="highlight(i)"
     [ngClass]="{'selected': i === selectedIndex}">
    <span>{{ option }}</span>
</div>

组件：

selectedIndex = 0

...

highlight(i: number) {
    this.selectedIndex = i;
}

onKeydown(event: KeyboardEvent) {
    if (event.code === 'ArrowUp' && this.selectedIndex > 0) {
        event.preventDefault();
        this.selectedIndex--;
    } else if (event.code === 'ArrowDown' && this.selectedIndex < (this.options.length - 1)) {
        event.preventDefault();
        this.selectedIndex++;
    } 
}

css:

.selected {
    background-color: red;
}