키보드 이벤트로 호버를 시뮬레이트하는 방법

Question

목록 항목이 드롭 다운 목록에 동적으로 추가되는 다음 HTML 템플리트가 있습니다. 내 마우스로이 목록 항목을 가져 가면

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

, 내가 즉, 목록 항목에, 내가 할 수있는 적용 호버 스타일을 볼 수

<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> 

나는 목록 항목에 대해 다음 호버 스타일을 가지고 이 경우 노란색 배경색을 참조하십시오.

기본적으로 첫 번째 항목이 선택됩니다. 즉, 활성 상태 인 클래스입니다. 그런 다음 사용자가 아래쪽 화살표 키를 누르면 활성 클래스는 같은 위치에 있지만 호버 상태는 다음 목록 항목으로 이동해야하므로 다음 항목으로 이동해야합니다.

다음 방법을 구현했지만 후속 요소를 올바르게 진행할 수 없습니다.

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