Mit CSS durch HTML-Elemente hindurch klicken

In seltenen oder auch ekeligen Fällen kommt es vor, dass man z.B. durch einen <div>-Container hindurch auf ein Element hinter diesem klicken möchte. Zumeist tritt dieser Fall auf, wenn ein Teil des Inhalts durch ein halbtransparentes Hintergrundbild überlagert wird. Abhilfe schafft die CSS-Eigenschaft pointer-events.

HTML

<div class="container">
	<button type="button">try to click me</button>
	<div class="layer"></div>
</div>

CSS

.container {
	background: #eee;
	height: 200px;
	padding: 20px;
	position: relative;
}

.layer {
	background: rgba( 255, 0, 0, .25 );
	pointer-events: none;
	position: absolute; top: 10px; right: 10px; bottom: 10px; left: 10px;
}

JSFiddle-Demo

jQuery-Workaround für den IE < 11

Wer hier natürlich mal wieder nicht richtig mitmachen will, ist der InternetExplorer. Angeblich soll hier ein DirectX-Filter Abhilfe schaffen. Ich habe mich seinerzeit allerdings für einen Workaround mittels jQuery entschieden. Schön ist das aber nicht!

function passThrough( e , method ) {
	e.preventDefault();
	$('button, a').each( function() {
		var mouseX	 = e.pageX,
				mouseY	 = e.pageY,
				offset	 = $(this).offset(),
				width		= $(this).width(),
				height	 = $(this).height(),
				in_focus = mouseX > offset.left && mouseX < offset.left + width && mouseY > offset.top && mouseY < offset.top + height;
		if ( method === 'move' ) {
			if ( in_focus ) {
				$('.container').css( 'cursor', 'pointer' );
				return false;
			} else {
				$('.container').css( 'cursor', 'default' );
			}
		 } else {
			if ( in_focus ){
				$(this).click();
			}
		}
	});
}