JSFiddle - React, Tailwind, and code Playground

by shmdhussain

HTML

<body>
    
	<div class="">
			<ul class="" id="">
				
				   <li class=" ">
						<a class="current" href="#" >
							<span class="">
								MyName
							</span>
							<br>
							<span class="">MyData</span>
						</a>
					</li>
				
				   <li class="" >
						<a class="" href="#" >
							<span class="">
								MyName
							</span>
							<br>
							<span class="">MyData</span>
						</a>
					</li>
				
				   <li class="" >
						<a class="" href="#">
							<span class="">
								MyName
							</span>
							<br>
							<span class="">MyData</span>
						</a>
					</li>
			</ul>

 </div>
</body>

CSS

li{background-color:#DCDEDB;
			border:1px solid black;
			padding:20px;
		}
		.hoverBG{
			background-color:red;
		}

JavaScript

jQuery(function($){
			var groupTab = $("ul").children("li");	
			groupTab.hover(function(){
			if(!($(this).children("a").hasClass("current")))
			{
				$(this).siblings("li").children("a").removeClass("hoverBG");			
				$(this).children("a").addClass("hoverBG");
			}					
			});			
			groupTab.mouseout(function(){
				$(this).children("a").removeClass("hoverBG");				
			});
		});