JSFiddle - React, Tailwind, and code Playground

by Slico

HTML

<div class="hover">
    
</div>

CSS

.hover {
    position: relative;
    height: 300px;
    width: 100px;
    border: 1px solid black;
    background-color: #d9d9d9;
}

.inner {
    position: absolute;
    height: 100px;
    width: 100%;
    border: 1px solid black;
    box-sizing: border-box;
    background-color: rgba(59, 78, 146, 0.7);
}

.inner span {
    display: block;
    width: 50%;
    background-color: pink;
}
}

JavaScript

function positionBox(element, position) {
    element.css({
        top: position - element.parent().offset().top - 10,
    });
    element.empty();
    jQuery('<span />').appendTo(element).text(position);    
}

$(document).bind('mousemove', function(e) {
    if ($('.inner').length <= 0)
        return;
    positionBox($('.inner'), e.pageY);
});

$('.hover').hover(function(e) {
    var innerBox = jQuery('<div />', {
        id: 'theBox',
        class: 'inner',
    }).appendTo(this).click(function(e) {
    });
    positionBox(innerBox, e.pageY);
}, function(e) {
    $('.inner').remove();
});