JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="div1" class="class1" onclick="func();">
        <div id="div2" class="class2">
        </div>
    </div>
</body>

CSS

.class1 {
    background: #000000;
    width: 100px;
    height: 100px;
}
.class2 {
    display: none;
}
.class1:hover {
    background: #888888;
}
.class1:hover .class2 {
    display: block;
    position:absolute;
    top:50px;
    left:50px;
    background: #bb3333;
    width: 100px;
    height: 100px;
}

JavaScript

func = function() {
    var div1 = document.getElementById("div1");
    var div2 = document.getElementById("div2");
    div2.className = "";
    document.body.removeChild(div1);
    document.body.appendChild(div1);
}