JSFiddle - React, Tailwind, and code Playground

by Rolf Friedrich

HTML

<div class="bnr-400">
    <div class="banner-border"></div>
    <div class="banner">
        <div>Click through a DIV to underlying element works different in browsers. Opera needs manual event forwarding, Firefox and Chrome understand pointer-events:none; and IE doesn't need anything with transparent background; with background:white; opacity:0; filter:Alpha(opacity=0); IE needs forwarding like Opera. See <a href="http://caniuse.com/pointer-events">http://caniuse.com/pointer-events</a></div>
    </div>
</div>

<div class="s">
</div>

CSS

body { margin: 20px; font-size:13px; }

.banner-border { position:absolute; z-index:9999; pointer-events:all; border:14px solid #F2238F; }
.banner { overflow:hidden; }

.bnr-400 .banner-border { width:398px; height:88px; }
.bnr-400 .banner { width:400px; height:90px; background: #88f; }
.bnr-400 .banner div { padding:5px; }

JavaScript

$('.banner-border').on('mousemove click', function(e) {
    $(this).next().trigger(e); // needed for Opera
    // Firefox/Webkit needs CSS pointer-events:none;
    // IE doesn't need anything
});
$('.banner').on('mousemove click', function(e) {
    $('.s').text(e.type + ' '+ e.pageX + ", " + e.pageY);
});