JSFiddle - React, Tailwind, and code Playground

HTML

<div class="pos-content count1">div1</div>
<div class="pos-content count2">div2</div>
<div class="pos-content count3">div3</div>

/* Menu */
<ul>
<li class="item177">Menu Link 1</li>
<li class="item178">Menu Link 2</li>
<li class="item179">Menu Link 3</li>
</ul>

JavaScript

$(document).ready(function() {
    $('div').hover(function() {
        $("ul li").eq($(this).index()).trigger("mouseover");
    }, function() {
        $("ul li").eq($(this).index()).trigger("mouseout");
    });

    $('li').hover(function() {
        $('div').eq($(this).index()).css('background-color', 'red');
        $(this).css('background-color', 'red');
    }, function() {
        $('div').eq($(this).index()).css('background-color', 'white');
        $(this).css('background-color', 'white');
    });
});