Cuando necesites que ciertos elementos no respondan (hover, click…) a eventos del ratón (o táctil)… tenemos la propiedad css pointer-events con su valor «none» para poder desabilitarlo y hacer ese elemento como «invisible al cursor».
pointer-events: none;
Para verlo en funcionamiento, un ejemplo muy común de uso:
Seleccionar un texto que esta por debajo de otro elemento:
Si intentas seleccionar el texto de abajo en el ejemplo de la izq vemos que solo selecciona el que esta por encima. Y en el ejemplo de la derecha con pointer-events vemos que hace al elemento que esta por encima lo hace invisible al cursor, pudiendo seleccionar de esta forma el texto que hay un nivel por debajo.
Agradezco tu comentario 🤘