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:hover{
    color: red;
}

JavaScript

$(function() {
    $('body').append('<div class="ok"><a href="#">Injected</a></div>');
    
    $('#test').mouseenter(function() {
        // Force reflow : detach & re-attach
        $('body').append($('div').removeClass('test').detach());
        
    }).mouseleave(function() {
        // Force reflow : detach & re-attach
        $('body').append($('div').addClass('test').detach());
    });
    
});