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;
}
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();
}
}
});
}