JSFiddle - React, Tailwind, and code Playground

by dandclark_msft

HTML

<div id="div0" style="display: inline-block;">
    <button id="button0" disabled>Button0 with no styles</button>
</div>
<br><br><br>
<div id="div1" style="display: inline-block;">
    <button id="button1" disabled style="pointer-events: none;">Button1 with pointer-events: none</button>
</div>
<script>
    document.querySelector("#div0").addEventListener("mouseover", () => {console.log("div0 mouseover")});
    document.querySelector("#div0").addEventListener("mouseout", () => {console.log("div0 mouseout")});
    document.querySelector("#div1").addEventListener("mouseover", () => {console.log("div1 mouseover")});
    document.querySelector("#div1").addEventListener("mouseout", () => {console.log("div1 mouseout")});

    document.querySelector("#div0").addEventListener("mouseenter", () => {console.log("div0 mouseenter")});
    document.querySelector("#div0").addEventListener("mouseleave", () => {console.log("div0 mouseleave")});
    document.querySelector("#div1").addEventListener("mouseenter", () => {console.log("div1 mouseenter")});
    document.querySelector("#div1").addEventListener("mouseleave", () => {console.log("div1 mouseleave")});
</script>