JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">
    <span class='catch' id="a">One</span>
    <span class='catch' id="b">Two</span>
    <span class='catch' id="c">Three</span>
    <span class='catch' id="d">Four</span>
    <span class='catch' id="e">Five</span>
    <span class='catch' id="f">Six</span>
    <span class='catch' id="g">Seven</span>
</div>

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

CSS

.green {
 background-color: green;
}

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

.catch {
 border: 1px solid blue;
 padding: 10px;
}

JavaScript

function highlightHoveredObject(x, y) {
    $('.catch').each(function() {
      // check if is inside boundaries
      if (!(
          x <= $(this).offset().left || x >= $(this).offset().left + $(this).outerWidth() ||
          y <= $(this).offset().top  || y >= $(this).offset().top + $(this).outerHeight()
      )) {
              
        $('.catch').removeClass('green');
        $(this).addClass('green');
      }
    });
}


$(".catch").bind("touchmove", function(evt){
  var touch = evt.originalEvent.touches[0]
  highlightHoveredObject(touch.clientX, touch.clientY);
})