JSFiddle - React, Tailwind, and code Playground

HTML

<li id="menu_left">
    <a href="#" id="mys1" class="menu">Myš</a>
    <a href="#" id="potkan1" class="menu">Potkan</a>
</li>
<li id="menu_left">
    <a href="#" id="mys2" class="menu">Myš</a>
    <a href="#" id="potkan2" class="menu">Potkan</a>
</li>

CSS

#menu_left a{
    font-family:tahoma;
    width: 200px; 
    padding: 5px; 
    margin:10px 0;
    display:block;
    text-decoration:none;
}
.menu{
    border:1px solid #FF0000;
    background: #FFFF00;
    color: #FF0000;
}
.menu_over {
    border:1px solid #000000;
    background: #FF0000; 
    color: #ffffff;
}

JavaScript

$("#potkan1").hover(function () {
     $("#mys1").toggleClass("menu_over");
});

$("#mys1").hover(function () {
     $("#potkan1").toggleClass("menu_over");
});

$("#potkan2").hover(function () {
     $("#mys2").toggleClass("menu_over");
});

$("#mys2").hover(function () {
     $("#potkan2").toggleClass("menu_over");
});