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(){
$('div').each(function(i,el)
{
var s = getStyle('#' + $(el).attr("id") + ":hover", 2);
//alert(s.match(/\{(.+?)\}/)[1]);
s.match(/\{(.+?)\}/)[1].split(';').forEach(function(v)
{
var cssline = v.split(':');
if (cssline.length == 2)
$(el).css(cssline[0].trim(), cssline[1].trim());
});
});
//make both divs hover classes active
});