jQuery lave-lampe comme effet rebondir dans tous les sens!

Question

J'ai suivi le tutoriel trouvé ici et ajouté mon propre fusée à lui: tutoriel

Ce que je cherchais à accomplir était de mettre une image spécifique sur le côté gauche et à droite de l'élément de la liste. Ainsi, au lieu de simplement le <li id="blob"></li> générique créé dans le tutoriel, je l'ai fait <li id="blob"><div class="blob-wrap"><div class="leftimage"></div><div class="rightimage"></div></li> pour obtenir l'effet particulier que je voulais. Il fonctionne à merveille ... sauf que l'image tente de rebondir le « currentPageItem » si je laisse le vol stationnaire de la souris sur l'un des éléments de la liste.

Voici un exemple JS Bin: http://jsbin.com/odome

Que dois-je faire pour y remédier? jQuery est mise à feu de la fonction « hoverOut » (ou tout ce que vous voulez l'appeler). Mais pourquoi?

Answer 1

Le z-index était, en effet, le problème. Je ne savais pas que z-index ne sont pas applicables aux éléments flottaient cependant. Je devais appliquer position: relative aux liens a et lui donner un z-index plus élevé que le blob.