JSFiddle - React, Tailwind, and code Playground

HTML

<div id='content'>
  Lorem (ipsum dolor sit amet, (consectetur (adipiscing) elit) Quisque sodales elit magna, vitae) ullamcorper elit.
</div>

CSS

.parenthesis.active:hover {
  color: red;
}

JavaScript

var elem = document.getElementById('content');
var str = elem.innerHTML
elem.innerHTML = str
    .replace(/\(/g, '<span class="parenthesis">(')
    .replace(/\)/g, ')</span>');

var activeElem
var oldActiveElem

elem.addEventListener("mouseover", function (evt) {
  activeElem = evt.target
  if (activeElem !== oldActiveElem) {
    if (oldActiveElem) {
      oldActiveElem.classList.remove('active')
    }
    if (activeElem.className === 'parenthesis') {
      activeElem.classList.add('active')      
    }
    oldActiveElem = activeElem
  }
});