jQuery di lava-lamp-come effetto di rimbalzo dappertutto!

Question

Ho seguito il tutorial trovato qui e ha aggiunto la mia torcia ad esso: esercitazione

Quello che stavo cercando di realizzare è stato quello di mettere un'immagine specifica sul lato destro e sinistro della voce di elenco. Così, invece di solo il <li id="blob"></li> generica creato nel tutorial, ho fatto <li id="blob"><div class="blob-wrap"><div class="leftimage"></div><div class="rightimage"></div></li> per realizzare il particolare effetto che volevo. Funziona in modo bello ... tranne che i tentativi di immagine di riprendersi il "currentPageItem" se lascio il passaggio del mouse sopra una delle voci di elenco.

Ecco un esempio JS Bin: http://jsbin.com/odome

Che cosa devo fare per risolvere il problema? jQuery è sparare la funzione "hoverOut" (o come volete chiamarlo). Ma perché?

Answer 1

L'indice z è stato, infatti, il problema. Non mi rendevo conto che Z-indici non si applicano a elementi mobili però. Ho dovuto applicare position: relative ai collegamenti a e dargli un z-index più alto del blob.