¿Puedo hacer que un elemento sea invisible para los ahorcables?

Question

Tengo un div que tiene un tipo de efecto starburst (fondo png transparente) que quiero superponer en una serie de imgs mientras están suspendidos; Tengo que hacer que el div sea grande para contener la imagen, pero luego se interpone en el camino de detectar los "hover" en las imágenes. (Tengo todos como imágenes de fondo por lo que están cargados a través de un mediaquery css alta resolución)

Cada 'imagen' es una serie de elementos se parece a esto ahora:

<div class="section"> 
    <div class="starburst"></div> 
    <a href="link"> 
     div class="image"> 
      <div class="non-hover"></div> 
      <div class="hover"></div> 
     </div> 
     <p>Caption</p> 
    </a> 
</div> 

JS es como esto

$('.section a').hover(
    function() { 
     $('.speaker .hover').hide(); 
     $(this).find('.non-hover').addClass('focus'); 
     $(this).find('.hover').stop().show().animate({opacity:1.0}, 1000); 
    }, 
    function() { 
     $(this).find('.hover').stop().animate({opacity:0.0}, 0); 
     $(this).find('.non-hover').removeClass('focus'); 
    } 
); 

Mi pregunta es dónde poner los .starbursts, cómo tratar con ellos para que estén al frente, con su imagen bg en la parte superior de la imagen cernía, pero no se interpone en el camino de cernido en ellos. No estoy seguro de que esto sea posible, pero espero que haya una manera. Haga que se separen porque quiero animarlos de manera diferente.

Answer 1

Puede utilizar el CSS pointer-events propiedad:

la propiedad CSS puntero-eventos permite a los autores controlar en qué circunstancias (si lo hay) un elemento gráfico en particular puede llegar a ser el blanco de los eventos del ratón.

.starbursts { 
    pointer-events: none 
}