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 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('');



        });