JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hover Event Example</title>
    <style>
        .node {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <div id="parent">
        <div id="child1" class="node">Child Node 1</div>
        <div id="child2" class="node">Child Node 2</div>
    </div>

    <script>
        // Function to handle hover event
        function handleHover(event) {
            console.log(event.target.id);
        }

        // Add hover event listeners to each node
        document.getElementById('parent').addEventListener('mouseenter', handleHover);
        document.getElementById('child1').addEventListener('mouseenter', handleHover);
        document.getElementById('child2').addEventListener('mouseenter', handleHover);
    </script>
</body>
</html>