JSFiddle - React, Tailwind, and code Playground

by Paulpro

HTML

<div id="nav">
    <div>Line 1</div>
    <div>Line 2</div>
    <div>Line 3</div>
    <div>Line 4</div>
    <div>Line 5</div>
    <div>Line 6</div>
</div>

CSS

#nav{
  width: 300px;
  border-top: 1px solid #000;
}

#nav div{   
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  border-left: 1px solid #000;
}

JavaScript

function ondivchange(div, i){
    // div is the element
    // i is the index
}

(function(f){f=f||function(){};var e=document.getElementById("nav").getElementsByTagName("div"),b,a=0;for(b=0;b<e.length;b++){e[b].onmouseover=(function(c){return function(){e[a].style.backgroundColor="";a=c;e[a].style.backgroundColor="#68F";f(e[a],a)}})(b)}e[a].style.backgroundColor="#68F";document.onkeydown=function(d){var c=0;if(d.keyCode==38){c=-1}else{if(d.keyCode==40){c=1}else{return}}e[a].style.backgroundColor="";a=((a+c)%e.length);a=a<0?e.length+a:a;e[a].style.backgroundColor="#68F";f(e[a],a)}})(ondivchange);