JSFiddle - React, Tailwind, and code Playground
HTML
<div height="300px" id="myDiv">
Hello how are you
jhdjshjdh
<div>
dsjhdfdf
</div
</div>
CSS
div{
font-weight: 900;
background:red;
min-width:500px;
positon:fixed;
}
JavaScript
(function findTextNodes(current, callback) {
for(var i = current.childNodes.length; i--;){
var child = current.childNodes[i];
if(3 === child.nodeType)
callback(child);
findTextNodes(child, callback);
}
})(document.getElementById('myDiv'), function(textNode){
$(textNode).replaceWith('<span class="textNode">' + textNode.nodeValue + '</span>');
});
$('.textNode').hover(function(){
$(this).css('color', 'white');
},function(){
$(this).css('color', 'black');
});