Pointer events en CSS

Sin importar el orden de apilamiento o posición es posible controlar por medio de css con una simple propiedad el evento del cursor a un elemento, dicha propiedad es Pointer-events, en otras palabras, podemos decirle a nuestro elemento que el puntero sea invisible o no...

La sintaxis es la misma que se utilizan en todos los casos de css, (propiedad:valor;)

Miremos el ejemplo de la imagen principal, supongamos por un momento que hay dos imágenes en una sola, al fondo la ciudad y al frente un joven mirándola, en este caso queremos hacer click sobre la imagen de fondo pero la del frente no nos lo permite, la solución es muy simple, con ayuda de la propiedad pointer-events haremos que funcione.

.city {
    position:absolute;
    z-index:0;
    pointer-events:auto;
}
.young {
    position:absolute;
    z-index:1;
    pointer-events:none;
}

Hicimos que la la clase .city que es la imagen de la ciudad tuviera el puntero por default cuando es un link, y la clase .young que es la imagen del joven tendrá el puntero invisible, y al pasar por encima de la imagen conjunta, todo esta va a ser un link...

Aquí otro ejemplo con el mismo problema y resultado:

a {
    position:absolute;
    height:150px;
    width:75%;
    background:#cbcbcb;
    left:0; 
    top:0;
    z-index:0; 
    pointer-events:auto;    
}
div {
    position:absolute;
    height:150px;
    width:75%;
    background:#3e6f96;
    right:0;
    bottom:0;
    z-index:1;
    pointer-events:none;    
}

Un truco muy fácil de usar cuando queremos o necesitamos jugar con los punteros entre capas...