JSFiddle - React, Tailwind, and code Playground

Mouseover mouseenter playground

by Ttt Yyy

HTML

<!DOCTYPE html> 
<html>
  <head />
  <body>
    <div id='external1'>
      <div id='internal1'>
      </div>
    </div>
    <div id='external2'>
      <div id='internal2'>
      </div>
    </div>
    <div id='console1'>
    0
    </div>
    <div id='console2'>
    0
    </div>
  </body>
</html>

CSS

#external1 {
  border: 1px solid blue;
  width: 50px;
  height: 50px;
}

#internal1 {
  border: 1px solid red;
  width: 25%;
  height: 25%
}

#external2 {
  border: 1px solid green;
  width: 50px;
  height: 50px;
}

#internal2 {
  border: 1px solid black;
  width: 25%;
  height: 25%
}

JavaScript

let console1 = document.getElementById('console1');
let console2 = document.getElementById('console2');

let external1 = document.getElementById('external1');
external1.addEventListener('mouseenter', e => {
	let counter = console1.innerText;
  counter++;
  console1.innerText = counter;
})

let external2 = document.getElementById('external2');
external2.addEventListener('mouseover', e => {
	let counter = console2.innerText;
  counter++;
  console2.innerText = counter;
})