Sovrapposizione di immagini del mouseover JQuery

Mi sto solo chiedendo come posso farlo funzionare correttamente al 100%. Penso di essere quasi arrivato.

Fondamentalmente, ho un’immagine e quando topo il mouse, voglio un overlay (che è un div colorato) per apparire sopra le righe.

Ho questo semi-lavoro in questo violino .

 
/* CSS */ .company-image { } .company-image-overlay { width: 160px; height: 160px; background-color: #ffb00f; z-index: 1; opacity: 0.5; position: fixed; top: 0.5em; display:none; } /* JQUERY */ $('.company-image').mouseover(function() { $('.company-image-overlay').show(); }); $('.company-image').mouseout(function() { $('.company-image-overlay').hide(); });

Il problema sembra essere quando appare l’overlay, il mouse non è più tecnicamente sopra l’ .company-image quindi otteniamo un ciclo costante di over / out e lo sfondo lampeggiante.

Qualche idea?

    La soluzione più semplice è aggiungere un elemento wrapping per entrambi gli elementi:

     

    E mouseout metodi mouseover / mouseout su quell’elemento:

     $('.wrap').mouseover(function () { $('.company-image-overlay').show(); }).mouseout(function () { $('.company-image-overlay').hide(); }); 

    Demo di JS Fiddle .

    Invece di controllare l’elemento .company-image , dovrai controllare l’overlay. Prova quanto segue.

     $('.company-image').on("mouseover", function () { $('.company-image-overlay').show(); }); $('.company-image-overlay').on("mouseout", function () { $('.company-image-overlay').hide(); }); 

    Se fossi in te, userei solo css. In realtà non hai bisogno di alcun tipo di funzione come show() o hide() . Ho usato un tag per il wrapping perché alcune vecchie versioni di Internet Explorer lo sanno :hover il :hover solo su questo tag.

    Puoi controllare il trucco qui