JSFiddle - React, Tailwind, and code Playground

by cambraca

HTML

<div id="thediv"></div>
<div id="one">one</div><br />
<div id="two">two</div><br />
<div id="three">three</div><br />

CSS

div {
    font-size: 40px;
}
#thediv {
    opacity: .5;
    background-color: red;
    width: 200px;
    height: 200px;
    position: absolute;
    top: 70px;
    left: 40px;
    z-index: 100;
}
#one, #two, #three {
    background-color: gray;
    display: inline;
}

JavaScript

$('div:not(#thediv)').filter(function() {
    var offset = $(this).offset();
    var left = offset.top;
    var top = offset.top;
    var right = left + $(this).width();
    var bottom = top + $(this).height();

    var offset2 = $('#thediv').offset();
    var left2 = offset2.top;
    var top2 = offset2.top;
    var right2 = left2 + $('#thediv').width();
    var bottom2 = top2 + $('#thediv').height();
    
    if (
        (
            (left < left2 && right > left2)
            || (left > left2 && right < right2)
            || (left < right2 && right > right2)
        )
        &&
        (
            (top < top2 && bottom > top2)
            || (top > top2 && bottom < bottom2)
            || (top < bottom2 && bottom > bottom2)
        )
        )
        return true;
    else
        return false;
}).css('background-color', 'red');