JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <ul>
    <li>Fruits</li>
    <li>Vegetables</li>
    <li>Nuts</li>
  </ul>
</div>

JavaScript

var listDiv = document.querySelector('div');

listDiv.addEventListener('mouseover', (event) => {
    if (event.target.tagName == 'LI') {
        event.target.textContent = event.target.textContent.toUpperCase();
    }
    console.log(event);
});