JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css">
<div id="main" ontouchmove="touchMove(event);">
    
   <p>
    <span class='catch'>One</span>
    <span class='catch'>Two</span>
    <span class='catch'>Three</span>
    <span class='catch'>Four</span>


   </p>
       <p>
    <span class='catch'>One</span>
    <span class='catch'>Two</span>
    <span class='catch'>Three</span>
    <span class='catch'>Four</span>

   </p>
</div>

<div id="log"></div>

CSS

.green {
 background-color: green;
}

#main{
 border: 1px solid black;   
 padding: 20px
}

.catch {
 border: 1px solid blue;
 padding: 10px;
 /*float:left;*/
}

p {
    padding: 40px;
}

JavaScript

/*jqo -> div jquery object
 * left is from event->pageX
 * top is from event->pageY
 * returns true if jqo overlaps with pagex pagey coordinates, false otherwise*/
function div_overlap(jqo, left, top) {
    var d = jqo.offset();
    return top >= d.top && left >= d.left && left <= (d.left+jqo[0].offsetWidth) && top <= (d.top+jqo[0].offsetHeight);
}

/* To prevent WebView from scrolling on swipe, see http://goo.gl/DIZbm */
touchMove = function(event) {
    // Prevent scrolling on this element
    event.preventDefault();
}


//$("#main").bind("touchmove", function(evt){
$("#main").bind("vmousemove", function(evt){
    $('.catch').each(function(index) {
       if ( div_overlap($(this), evt.pageX, evt.pageY) ) {
          $('.catch').not('eq('+index+')').removeClass('green');
          if (!$(this).hasClass('green')) {
             $(this).addClass('green');
          }
       }
    });
});