JSFiddle - React, Tailwind, and code Playground

by mbelsky

HTML

<a>&lta&gt<div id='yellow'></div><div></div>&lt/a&gt</a>

CSS

a { 
  display: inline-block;
  background: grey;
}

div {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: green;
}

div#yellow {
  width: 100px;
  height: 100px;
  background: yellow;
}

JavaScript

const a = document.querySelector('a')
a.addEventListener('mouseover', (e) => {console.log('hovered', e.target, e.currentTarget)})
a.addEventListener('mouseout', (e) => {console.log('plain', e.target, e.currentTarget)})