JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="list">
    <li style="color: red">A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
</ul>

JavaScript

var i = 0;

var list = document.getElementById("list"), length = list.children.length;
list.addEventListener("wheel", ColorLi);

function ColorLi(e) {
    //reset colors
    for(var j = 0; j < length; j++)
        list.children[j].style.color = "black";
    //calculate index
    if(e.wheelDelta > 0)
        i++;
    else
        i--;
    //fix index out of range
    i = i < 0 ? 0 : i;
    i = i > length-1 ? length-1 : i;
    //set color
    list.children[i].style.color = "red";
}