JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="navigation">
  <li><a href="#" title="what" class="selected">Test 1</a></li>
  <li><a href="#" title="ever">Test 2</a></li>
</ul>

CSS

.navigation {
    list-style-type: none;
    color: #ecf0f1;
}

.navigation .selected,
.navigation .hovering {
    color: #d35400;
}

JavaScript

$(function () {
            if (!$(this).hasClass('selected')) {
                $('.navigation li').hover(function () {
                    $(this).find('a').attr('class', 'hovering');
                },
                function () {
                    $(this).find('a').attr('class', '');
                });
            }
        });