JSFiddle - React, Tailwind, and code Playground

by Darby Rathbone

HTML

<div><span>a</span><span>b</span><span>c</span><span>d</span>

    <input type="text" />
</div>
<div id='classed'></div>

CSS

div {



    position:relative;



}



.mouseover {



    color:red !important;



}



span {



    color:black !important;



}



input {



    background:transparent;



    opacity:.5;



    position:absolute;



    top:0px;



    left:0px;



    width:100%;



    height:100%;



}

JavaScript

var sepearate = [].slice.call(document.querySelectorAll('.seperate')).map(function (a) {
    var insideall = [].slice.call(a.querySelectorAll('*')).map(function (b) {
        b.value.split('').forEach(function (c) {
            b.appendChild(document.createTextNode(c));
        });
        b.value = '';
    });
    a.value.slice('').forEach(function (c) {
        a.appendChild(document.createTextNode(c));
    });
    a.value = '';
})

var all = [].slice.call(document.querySelectorAll('*'));
window.addEventListener('mousemove', function (e) {
    var x = e.pageX,
        y = e.pageY,
        addclass = all.filter(function (a) {
            a.classList.remove('mouseover');
            var c = a.getBoundingClientRect();
            //console.log((b.top > y , b.top + b.height < y , b.left > x , b.left + b.width < x));
            console.log(c);
            console.log(e);

            var b = c;

            console.log((y > b.top && y < (b.top + b.height)) && (x > b.left && x < b.right));

            return (y > b.top && y < (b.top + b.height)) && (x > b.left && x < b.right);
        });
    console.log(addclass);
    addclass.forEach(function (a, i) {
        addclass[i].classList.add('mouseover');
    });
    console.log(addclass);
    document.getElementById('classed').textContent = addclass.join('');



});