JSFiddle - React, Tailwind, and code Playground

by anubhabB

HTML

<div class="someClass" id="button1">Hover1</div>
<div class="someClass" id="button2">Hover2</div>

<div class="hoverMe">
    <li>Hover Ex</li>
    <li>Hover Ex</li>
</div>

CSS

.someClass{
    width:100px;
    height:30px;
    float:left;
    border:1px solid #ccc;
    text-align:center;
}
.hoverMe{
    position:fixed;
    width:100px;
    height:200px;
    background:#ccc;
    display:none;
}

JavaScript

$(function(){
    $("#button1").mouseenter(function(){
        $(".hoverMe").css("display","block");
        $(".hoverMe").css("left",$("#button1").left() + "px");
        $(".hoverMe").css("top",$("#button1").height() + "px");
    });
    $("#button1").mouseleave(function(){
        $(".hoverMe").css("display","none");
    });
    $("#button2").mouseenter(function(){
        alert();
        $(".hoverMe").css("display","block");
        $(".hoverMe").css("left",$("#button2").offset().left + "px");
        $(".hoverMe").css("top",$("#button2").height() + "px");
        alert($("#button2").left());
    });
    $("#button2").mouseleave(function(){
        $(".hoverMe").css("display","none");
    });
});