JSFiddle - React, Tailwind, and code Playground

HTML

<a id="test">Over me</a>

<div>
    <a href="#">Lorem Ipsum</a>
    <a href="#">Lorem Ipsum</a>
    <a href="#">Lorem Ipsum</a>
    <a href="#">Lorem Ipsum</a>
</div>

<div class="test">
    <a href="#">Lorem Ipsum</a>
    <a href="#">Lorem Ipsum</a>
    <a href="#">Lorem Ipsum</a>
    <a href="#">Lorem Ipsum</a>
</div>

CSS

div {
    margin: 20px;
    width: 100px;
    background: blue;
    color: #FFF;
    overflow: auto;
}
div:before,
div:after {
    float: left;
    width: 100px;
    height: 20px;
    content: "";
    background: red;
}
div.test {
    background: green;
}
div.test:before,
div.test:after {
    background: green;
}

div a {
    float: left;
    color: #FFF;
}
#test {
    padding: 5px;
    background: #DDD;
    cursor: pointer;
}
#test.test {
    color: red;
}

JavaScript

$(function() {
    $('body').append('<div class="ok"><a href="#">Injected</a></div>');
    
    $('#test').mouseenter(function() {
        $(this).addClass('test');
        
        // Force reflow
        $('div').css('display', 'none');
        
        $('div').removeClass('test');
        
        setTimeout(function() {
            $('div').css('display', 'block');
        }, 1000);
        
        document.body.className = document.body.className;
        
    }).mouseleave(function() {
        $(this).removeClass('test');
        
        // Force reflow
        $('div').css('display', 'none');
        
        $('div').addClass('test');
        
        setTimeout(function() {
            $('div').css('display', 'block');
        }, 1000);
        
        
        document.body.className = document.body.className;
    });
    
});