JQuery Lava-Lamp-Like Effect Colling في كل مكان!
سؤال
تابعت البرنامج التعليمي الموجود هنا وأضفت مضيقه الخاص إليه: درس تعليمي
ما كنت أتطلع إلى إنجازه هو وضع صورة محددة على الجانب الأيسر والأيمن من عنصر القائمة. لذا بدلاً من مجرد عام <li id="blob"></li>
تم إنشاؤها في البرنامج التعليمي ، فعلت <li id="blob"><div class="blob-wrap"><div class="leftimage"></div><div class="rightimage"></div></li>
لإنجاز التأثير المعين الذي أردته. إنه يعمل بشكل جميل ... باستثناء أن الصورة تحاول ترتد "CurrentPageItem" إذا تركت الماوس يحوم فوق أحد عناصر القائمة.
إليك مثال JS Bin: http://jsbin.com/odome
ماذا علي أن أفعل لإصلاحه؟ تقوم JQuery بإطلاق وظيفة "Hoverout" (أو أي شيء تريد تسميته). لكن لماذا؟
المحلول
كانت Z-index ، في الواقع ، المشكلة. لم أكن أدرك أن z-indexes لم تنطبق على العناصر العائمة. اضطررت للتقدم position: relative
إلى a
الروابط ومنحها مؤشر z أعلى من النقطة.