jQuery problema al passaggio del mouse a causa di z-index

Question

Voglio attivare un evento di hover per un elemento utilizzando jQuery, ma ho un png semitrasparente posizionato sull'elemento utilizzando z-index. C'è un modo per dire a jQuery di ignorare il png e attivare l'evento hover per l'elemento sottostante?

Answer 1

Se si utilizza un browser moderno che supporta CSS3, provare ad aggiungere questa riga alla regola CSS per il png trasparenti: pointer-events: none;
Si dice in sostanza il browser di ignorare tutti gli eventi del mouse su questo elemento.

Ad esempio:

img 
{ 
    pointer-events: none; 
} 

https://developer.mozilla.org/en/css/pointer-events

In alternativa, se il browser di destinazione non supporta CSS3, è possibile catturare l'evento del mouse e poi sparare un nuovo sull'elemento sottostante.

ad esempio se l'immagine id è #img e il vostro elemento di fondo id è #elem si può fare questo:

$("#elem").hover(function(e){ 
    $("#img").mouseenter(e); 
}); 

Potrebbe essere necessario pasticciare con questo un po 'a seconda di come i tuoi DOM sono impostati , ecco la documentazione http://api.jquery.com/mouseenter/