JSFiddle - React, Tailwind, and code Playground

by techsin

HTML

<div class="wrap-nav">
    <div class="cont">
        <ul class="nav">
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
        </ul>
    </div>
</div>
<div class="cont"></div>

CSS

* {
    margin: 0;
    padding: 0;
}
.onTop {
    outline: 1px dotted rgba(0, 0, 0, .8);
    background-image:linear-gradient(to bottom, rgba(240, 255, 40, 1) 0%, rgba(240, 255, 40, 1) 100%), linear-gradient(to bottom, rgba(240, 40, 40, 1) 0%, rgba(240, 40, 40, 1) 100%);
    background-clip: content-box, padding-box;
}
.cont {
    width: 960px;
    margin: auto;
    font-family: Helvetica;
}
.wrap-nav {
    min-height: 50px;
    background-color: #eee;
    border-bottom: 1px solid green;
}
.nav {
}
.nav li {
    display: inline-block;
    list-style-type: none;
    line-height: 50px;
    padding: 0 20px;
}

JavaScript

$('*').mouseover(function (e) {
    if (e.target != $(this)[0]) return;
    $('*').removeClass('onTop');
    $(this).addClass('onTop');
    drawMargin($(this));
});


function drawMargin(x) {
    var sides = ['margin-top', 'margin-right', 'margin-bottom', 'margin-left'];
    var vals = [];
    sides.forEach(function (e, i) {
        vals[i] = parseInt(x.css(e));
    });
    var div = $('<div>');
    div.css({
        position: "absolute",
        top: x.position().top - vals[0],
        left: x.position().left - vals[3],
        height: x.height() + vals[0] + vals[2],
        width: x.width() + vals[1] + vals[3],
        backgroundColor: 'purple'
    });
    
    x.before(div);
    return x;
}