title: How to simulate the hover with keyboard events
body: <p>I have the following HTML template in which the list items are dynamically added to the dropdown list.</p>
  
  <pre><code>&lt;button class="btn btn-default btn-sm dropdown" (keydown)="triggerTraverse($event)"&gt;&lt;/button&gt;
      &lt;fa-list-filler&gt;
          &lt;li *ngFor="let item of items [class.active]="checkItem(item,selectedItem)"&gt;
              &lt;span (click)="doNavigate()" class="cookie"&gt;&lt;/span&gt;
          &lt;/li&gt;
      &lt;/fa-list-filler&gt;
  </code></pre>
  
  <p>I have the following hover style for the list items:</p>
  
  <pre><code>li &gt; .cookie {
          cursor: pointer;
          &amp;:hover{
              background-color: 'yellow';
          }
      }
  </code></pre>
  
  <p>When I hover these list items with my mouse, I can see the hover style applied to the list item i.e., I can see the yellow color background color in this case.</p>
  
  <p>By default, the first item is selected i.e., it has class active. Then, when the user presses the down arrow key, the active class remains at the same place, but the hover state should move down to the next list item and so onto the next item and should wrap around.</p>
  
  <p>I implemented the following method but I am unable to proceed correctly with the subsequent elements.</p>
  
  <pre><code>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');
  }
  }
  </code></pre>
  
  <p>hoverstyle is an another class which I just implemented to add the backgroundcolor to the element. </p>
  
  <pre><code>.hoverstyle{
   background-color: 'pink';
  }
  </code></pre>
  
  <p>could anyone please help.</p>