JSFiddle - React, Tailwind, and code Playground

by dixalex

HTML

<button id='yes'>Yes</button>
<button id='no'>No</button>
<div id='no' class="notification-box" />

CSS

.notification-box {
    position: absolute;
    height: 100vw;
    width: 100vw;
    background-color: black;
    opacity: 0.5;
    /*pointer-events: none;*/
    z-index: -10;
    overflow:visible;
}
button {
    position:absolute;
    top:absolute;
    width: 50px;
    z-index:-10;
}
button#no {
    margin-top:25px;
}
.yes {
    color: red;
    font-weight: bold;
}
.no {
    color: blue;
    font-weight: bold;
}

JavaScript

//CSS Hitbox Solution 08-26-2015
//StackOverflow - http://stackoverflow.com/questions/32233084/show-an-element-without-hitbox-does-not-take-mouse-touch-input
//Detect MouseOver http://stackoverflow.com/questions/1273566/how-do-i-check-if-the-mouse-is-over-an-element-in-jquery
//Source: http://stackoverflow.com/questions/3942776/using-jquery-to-find-an-element-at-a-particular-position
//https://css-tricks.com/snippets/jquery/get-x-y-mouse-coordinates/
(function ($) {
    $.mlp = {
        x: 0,
        y: 0
    }; // Mouse Last Position
    function documentHandler() {
        var $current = this === document ? $(this) : $(this).contents();
        $current.mousemove(function (e) {
            jQuery.mlp = {
                x: e.pageX,
                y: e.pageY
            };
        });
        $current.find("iframe").load(documentHandler);
    }
    $(documentHandler);
    $.fn.ismouseover = function (overThis) {
        var result = false;
        this.eq(0).each(function () {
            var $current = $(this).is("iframe") ? $(this).contents().find("body") : $(this);
            var offset = $current.offset();
            result = offset.left <= $.mlp.x && offset.left + $current.outerWidth() > $.mlp.x && offset.top <= $.mlp.y && offset.top + $current.outerHeight() > $.mlp.y;
        });
        return result;
    };
})(jQuery);
$('.notification-box').on("click", function () {
    $("button").each(function (i) {
        var iteratedButton = $('button:eq(' + i + ')');
        var buttonID = iteratedButton.attr("id");
        if (iteratedButton.ismouseover()) {
            iteratedButton.toggleClass(buttonID);
        }
    });
});