JQuery Lava Lamp Effect pulando em todo o lugar!

Question

Eu segui o tutorial encontrado aqui e adicionei meu próprio brilho a ele: tutorial

O que eu estava procurando realizar era colocar uma imagem específica no lado esquerdo e direito do item da lista. Então, em vez de apenas o genérico <li id="blob"></li> criado no tutorial, eu fiz <li id="blob"><div class="blob-wrap"><div class="leftimage"></div><div class="rightimage"></div></li> Para realizar o efeito particular que eu queria. Funciona lindamente ... exceto que a imagem tenta recuar o "currentPageItem" se eu deixar o mouse pairando sobre um dos itens da lista.

Aqui está um exemplo JS Bin: http://jsbin.com/odome

O que eu preciso fazer para consertar isso? JQuery está disparando a função "Hoverout" (ou o que você quiser chamá -la). Mas por que?

Answer 1

O índice Z era, de fato, o problema. Eu não sabia que o Z-Indexes não se aplicava a elementos flutuados. Eu tive que aplicar position: relative para o a vincula e dê um índice Z mais alto que o blob.