Suppose i have a card and I'm overlaying it with a less visible div. So the overlay has mousemove events set to it but for that reason anything under it won't respond to touch. Like i can't click the button or a link because the overlay is simply consuming the touch events. The only way to avoid it is that I apply pointer-events: none to it. But then i can't have touch events on the overlay. Is there any way both element can listen to touch events?
I saw this property used the other day. The coder assigned the property to a label of a form input. The label was below the input in the HTML markup, but repositioned using the CSS position property. I think using the pointer-events property in that tutorial, allowed the cursor to target the hidden input field underneath. Upon clicking on the label, the action started a CSS transition, moving the text up to reveal the input field hidden underneath. Once text was entered the label stayed in it's higher position. An extreme scenario perhaps, but just an example. When i tried that example, the input field could not be reached without pointer-events being set to "none" on the label.
