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是我刚刚实现的另一个类，用于将backgroundcolor添加到元素中。

.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;
}

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

1 个答案: