JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Sonuçların yazıldığı alan -->
<div class="counter">
    <p>mouseover {outerDiv} = <span id="mouseOverOuter"></span></p>
    <p>mouseover {innterDiv} = <span id="mouseOverInner"></span></p>
    <p>mouseenter {outerDiv} = <span id="mouseEnterOuter"></span></p>
    <p>mouseenter {innerDiv} = <span id="mouseEnterInner"></span></p>
</div>
 
<!-- En dış div -->
<div id="outerDiv">
    <!-- İç div -->
    <div id="innerDiv">
        <!-- Öylesine div -->
        <div id="innerinner"></div>
    </div>
</div>

CSS

/**
 * HTML anlaşılır görünsün diye biraz da CSS yazalım.
 */
#outerDiv {
    width: 300px;
    height: 300px;
    padding: 50px;
    background: blue;
}
#innerDiv {
    width: 200px;
    height: 200px;
    padding: 50px;
    background: red;
}
#innerinner {
    background: yellow;
    width: 100%;
    height: 100%;
}

JavaScript

$(document).ready(function () {
    var outerMouseOver = 0,
        outerMouseEnter = 0,
        innerMouseOver = 0,
        innerMouseEnter = 0;
 
    $("#outerDiv").mouseover(function () {
        outerMouseOver++;
        $("span#mouseOverOuter").html(outerMouseOver);
    });
 
    $("#outerDiv").mouseenter(function () {
        outerMouseEnter++;
        $("span#mouseEnterOuter").html(outerMouseEnter);
    });
 
    $("#innerDiv").mouseover(function () {
        innerMouseOver++;
        $("span#mouseOverInner").html(innerMouseOver);
    });
 
    $("#innerDiv").mouseenter(function () {
        innerMouseEnter++;
        $("span#mouseEnterInner").html(innerMouseEnter);
    });
});