JSFiddle - React, Tailwind, and code Playground

by svecon

HTML

<ul>
    <li> <a href="" class="mys">Myš</a>  <a href="" class="potkan">Potkan</a> 
    </li>
    <li> <a href="" class="mys">Myš</a>  <a href="" class="potkan">Potkan</a> 
    </li>
</ul>

CSS

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

JavaScript

var toggleFunc = function (el) {
    var classToggled = $(el).attr('class') == 'potkan' ? 'mys' : 'potkan';
    $(el).siblings('.' + classToggled).toggleClass('onHover');
};

$('ul > li > a').hover(function () {
    toggleFunc(this);
}, function () {
    toggleFunc(this);
});