JSFiddle - React, Tailwind, and code Playground

HTML

<h3>Binded mouseenter mouseleave</h3>
<ul id="binded">
<li>Hover me</li>
<li>Hover me</li>
<li>Hover me</li>
<ul>

<h3>Delegated mouseenter mouseleave</h3>
<ul id="delegated">
<li>Hover me</li>
<li>Hover me</li>
<li>Hover me</li>
<ul>
    
<h3>Delegated hover</h3>
<ul id="delegated-hover">
<li>Hover me</li>
<li>Hover me</li>
<li>Hover me</li>
<ul>

CSS

h3 { margin-top: 10px; font-weight: bold }

JavaScript

function handler(ev) { $(this).text(ev.type); }

$('#binded li').bind("mouseenter mouseleave", handler);

$("#delegated").delegate("li", "mouseenter mouseleave", handler);

$("#delegated-hover").delegate("li", "hover", handler);