JSFiddle - React, Tailwind, and code Playground

HTML

<div id="blah"> </div>
<div id="blah2"> </div>

CSS

div{
    background:#ccc;
    border:1px solid #333;
    width:100px;
    height:100px;
    margin:2px;
}

#blah:hover{
    background:red;
}

#blah2:hover{
    background:blue;
}

JavaScript

function getStyle(className, i) {
    var classes = document.styleSheets[i].rules || document.styleSheets[i].cssRules
    for(var x=0;x<classes.length;x++) {
        if(classes[x].selectorText==className) {
                return (classes[x].cssText) ? (classes[x].cssText) : (classes[x].style.cssText);
        }
    }
}

$(function(){

    var ss = "";
    $('div').each(function(i,el)
                  {
                      var s = getStyle('#' + $(el).attr("id") + ":hover", 2);
                      ss += s.replace(/^#(.+?)(:)(hover.+?\{.+?\})/, '.$1_$3\n')
                  });
    $("<style>" + ss + "</style>").appendTo("head");
    
    var dynamic_hover = function(el) { el.addClass(el.attr("id") + "_hover"); };
    var dynamic_unhover = function(el) { el.removeClass(el.attr("id") + "_hover"); };
    
    dynamic_hover($('#blah'));
    dynamic_hover($('#blah2'));
    dynamic_unhover($('#blah2'));
    
    //make both divs hover classes active
});