I've placed an arrow as an :after pseudo-element of a clickable tile. It creates a blind spot that is not clickable despite setting the height/width to 0.
Code here: http://cdpn.io/vpjCg
To see the issue, roll cursor over the tiled link, then over the character in the bottom-right corner.
Is there a CSS attribute or another solution to set the :after element as invisible to the mouse cursor so that the whole area is clickable?
Pseudo elements belong to their parents - if their parent is clickable (button
,a
) then so will the pseudo element. Likewise with DOM elements, if a DOM element has a click event listener bound, it will be fired when you click directly on the DOM element, or on it's pseudo elements.
EDIT
In addition to my answer, you can make your clicks go "through" an element to hit underlying elements using the CSS property pointer-events
and setting the value to none
. Works in every modern browser (IE9 and up) https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With