JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<ul>
    <li data-count="1">abcdddd</li>
    <li data-count="2">abcdddd</li>
    <li data-count="3">abcdddd</li>
    <li data-count="4">abcdddd</li>
    <li data-count="5">abcdddd</li>
</ul>

CSS

ul {
    list-style: none;
    display: flex;
}
li {
    padding: 10px 30px;
    font-size: 20px;
    position: relative;
    cursor: pointer;
}
li.a:after {
    transform-origin: right;
}
li:hover:after {
    transform: scaleX(1);
}
li:after {
    content: '';
    width: 100%;
    height: 100%;
    background: lightblue;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: .5s;
    transform: scaleX(0);
}

JavaScript

var a = document.querySelectorAll('li'),
	lastNumber = null;
for(var i = 0; i < a.length; i++){
    a[i].addEventListener('mouseover',function(){
    	if(this.dataset.count > lastNumber){
        	this.classList.replace('b' , 'a')
        }else {
        	this.classList.replace('a' , 'b')
        }
		lastNumber = this.dataset.count;
    })
}