JSFiddle - React, Tailwind, and code Playground

HTML

<div class="a1">  
  <div class="a11">
    <a href="a.php">A</a>
  </div>
  <div class="a12">
     <a href="b.php">B</a>
  </div>
</div>

CSS

.a11 a:hover, .a12 a:hover,.hovered { color:red;}

JavaScript

$( function(){

$('.a11 > a').on('mouseenter', function(){ 
$(this).parent().next('div').find('a').addClass('hovered')  ;
}).on ('mouseleave', function(){ $(this).parent().next('div').find('a').removeClass('hovered');})
});