JSFiddle - React, Tailwind, and code Playground

by Hoang Hoi

HTML

<div id="onmouseenter">
    <p>onmouseenter: <span id="demo1">Mouse over me!</span></p>
</div>

<div id="onmouseover">
    <p>
      onmouseover: <span id="demo2">Mouse over me!</span>
      <span style="background-color: red; padding: 2px">chil</span>
    </p>
</div>

CSS

div {
    width: 150px;
    height: 150px;
    margin: 10px;
    float: left;
    padding: 30px;
    text-align: center;
    background-color: blue;
}

p {
    padding: 10px;
    background-color: white;
}

JavaScript

var x = 0;
var y = 0;
document.getElementById('onmouseenter').addEventListener('mouseenter', myEnterFunction, true);
document.getElementById('onmouseover').addEventListener('mouseover', myOverFunction, true);
function myEnterFunction() {
    document.getElementById('demo1').innerHTML = x+=1;
}

function myOverFunction() {
    document.getElementById('demo2').innerHTML = y+=1;
}