Posso rendere invisibile un elemento al passaggio del mouse?

Question

Ho un div che ha un effetto starburst (sfondo png trasparente) che voglio sovrapporre a una serie di img mentre sono sospese; Devo fare in modo che div divenga grande per contenere l'immagine, ma poi interferisce con il rilevamento degli hover sulle immagini. (Li ho tutti come immagini di sfondo in modo che siano caricati tramite un css mediaquery alta risoluzione)

Ogni 'immagine' è una serie di elementi assomiglia a questo momento:

<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 è come questo

$('.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'); 
    } 
); 

la mia domanda è dove mettere i .starbursts, come trattare con loro in modo che siano di fronte, con la loro immagine bg sulla parte superiore dell'immagine è passato il mouse, ma non ottiene nel modo di hovering su di essi. Non sono sicuro che questo sia possibile, ma spero che ci sia un modo. Li ho separati perché voglio animarli in modo diverso.

Answer 1

È possibile utilizzare il CSS pointer-events proprietà:

la proprietà CSS puntatore-eventi consente agli autori di controllare in quali circostanze (se del caso) un elemento grafico particolare, può diventare il bersaglio di eventi del mouse.

.starbursts { 
    pointer-events: none 
}