JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="menu">
    <li >
        <a class="home" href="#">
            Home
        </a>
    </li>
    <li >
        <a class="about" href="#">
            About</a></li>
    <li >
        <a class="contact" href="#">
            Contact
        </a>
    </li>
</ul>

CSS

.transparent_class {
    /* IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
    
    /* IE 5-7 */
    filter: alpha(opacity=30);
    
    /* Netscape */
    -moz-opacity: 0.3;
    
    /* Safari 1.x */
    -khtml-opacity: 0.3;
    
    /* Good browsers */
    opacity: 0.3;
    
    color:#ff0000;
}
.nontransparent_class {
    /* IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    
    /* IE 5-7 */
    filter: alpha(opacity=100);
    
    /* Netscape */
    -moz-opacity: 1;
    
    /* Safari 1.x */
    -khtml-opacity: 1;
    
    /* Good browsers */
    opacity: 1;
    
    color:#000;
}

JavaScript

$(".menu a").live('hover', function() {
    //handle siblings
    var listItems = $(this).closest("li").siblings();
    $(listItems).each(function() {
        if ($(this).has('nontransparent_class')) {               
            $(this).find('a').removeClass('nontransparent_class')
                   .addClass('transparent_class');
        } else {
            $(this).find('a').addClass('transparent_class');
        }
    });
    //handle clicked link
    if ($(this).has('transparent_class')) {
        $(this).find('a').removeClass('transparent_class')
               .addClass('nontransparent_class');
    } else {
        $(this).find('a').addClass('nontransparent_class');
    }
});