JSFiddle - React, Tailwind, and code Playground

by pixeline

HTML

<div id="sinema_wrapper_2">
    <div id="pardon">pardon div</div>
    <div id="propaganda">propaganda div</div>
    <div id="numara">numara div</div>
</div>
<ul class="filmler">
    <li id="pardon-li">PARDON</li>
    <li id="propaganda-li">PROPAGANDA</li>
    <li id="numara-li">14 NUMARA</li>
</ul>

CSS

.filmler li {
    color: black;
}
#sinema_wrapper_2 div:hover, .filmler li.hover {
    color:red !important;
}

JavaScript

$('#sinema_wrapper_2 div').hover(

function () {
    var selector = $(this).attr('id') + '-li';
    $('.filmler li').removeClass('hover');
    $('#'+selector).addClass('hover');
},

function () {
    $('.filmler li').removeClass('hover');
});