JSFiddle - React, Tailwind, and code Playground

by Ronny

HTML

<a href="#" class="banner">Buy Viagra!</a>
<div id="overlay"></div>
<script>
    $('.banner').verifyVisibility();
</script>

CSS

.banner {width: 480px; height: 60px; background: hotpink; font: 20px/60px Impact, sans-serif; text-align: center; border: 4px groove purple; margin: 20px auto; display: block; color: #000; text-decoration: none; text-decoration: blink;}

#overlay {position: absolute; width: 200px; height: 200px; background: rgba(100%,100%,100%,0.5); border: 2px dotted #999; top: 40px; left: 130px;}

JavaScript

$.fn.verifyVisibility = function(){
    var self = this;
    $(function(){
    var methods = {},
        $this = $( self ),
        active = true,
        offset = $this.offset(),
        x = offset.left,
        y = offset.top
        x1 = x + $this.width();
        y1 = y + $this.height();

    methods.verify = function( e ){
        if( e.pageX >= x && e.pageX <= x1 &&
            e.pageY >= y && e.pageY <= y1 &&
            !$( e.target ).is( $this )
        ) {
            methods.warn( e.target );
            test = false;
            $(document).unbind( 'mousemove', methods.verify );
        }
    };
    
    methods.warn = function( blocking ){
        // developer warning
        console && console.warn('Within coords, and', $this, ' is hidden by', $(blocking));
        // user notice
        $('body').append('<h2 style="color: red;">Notice: It seems like an important element on this page is hidden.</h2>');
        // notify third party via ajax, etc.
    };

    $(document).mousemove( methods.verify );
    });
};