JSFiddle - React, Tailwind, and code Playground

by apaul34208

HTML

<div id="containment-wrapper1">containment-wrapper1
    <div id="box1">box1</div>
</div>
<div id="containment-wrapper2">containment-wrapper2
    <div id="box2">box2</div>
</div>
<div id="containment-wrapper3">containment-wrapper3
    <div id="box3">box3</div>
</div>
<div id="containment-wrapper4">containment-wrapper4
    <div id="box4">box4</div>
</div>
<p>hover over the red boxes</p>

CSS

body {
    height:2000px;
    margin:0;
    padding:0;
}
p {
    position: fixed;
    bottom:0px;
}
#box1 {
    position:fixed;
    height:100px;
    width:100px;
    border:1px solid red;
    top:200px;
}
#containment-wrapper1 {
    position:fixed;
    height:200px;
    width:100px;
    border:1px solid blue;
}
#box2 {
    position:fixed;
    height:100px;
    width:100px;
    border:1px solid red;
    top:200px;
    left:110px;
}
#containment-wrapper2 {
    position:fixed;
    height:200px;
    width:100px;
    border:1px solid blue;
    left:110px;
}
#box3 {
    position:fixed;
    height:100px;
    width:100px;
    border:1px solid red;
    top:200px;
    left:220px;
}
#containment-wrapper3 {
    position:fixed;
    height:200px;
    width:100px;
    border:1px solid blue;
    left: 220px;
}
#box4 {
    position:fixed;
    height:100px;
    width:100px;
    border:1px solid red;
    top:200px;
    left:330px;
}
#containment-wrapper4 {
    position:fixed;
    height:200px;
    width:100px;
    border:1px solid blue;
    left: 330px;
}

JavaScript

$('#box1').hover(function () {
    var offset = $('#box1').offset();
    $("#containment-wrapper1").css({
        bottom: offset.top
    });
});

$('#box2').hover(function () {
    var x = $('#box2').css('top');
    $("#containment-wrapper2").css({
        bottom: x
    });
});

$('#box3').hover(function () {
    var x = $('#box3').css('top');
    $("#containment-wrapper3").css({
        top: x
    });
});

$('#box4').hover(function () {
    var offset = $('#box4').offset();
    $("#containment-wrapper4").css({
        top: offset.top
    });
});