كيفية القيام بإظهار POP UP بعد المرور على الصورة الشخصية للمستخدم باستخدام jQuery

بتاريخ 12 ساعات قال Ahmed Monaiem:

ملف activity.js

توصلت لحل جيد بالاستعانة مع set time out - setTimeout أي إعطاء وقت للمستخدم للانتقال ل pop up قبل إخفاء الصورة الحالية، مع التخلص من set time out في حال انتقل ل pop up بالاستعانة ب clear time out - clearTimeout

// معرف المؤقت
let timeoutID;

// صورة المستخدم
$(".img img")
  .on("mouseover", function () {
    $(this).next().slideDown(500);  // إظهار التفاصيل بعد 
  })
  .on("mouseleave", function () { 
    timeoutID = setTimeout(() => {   // إخفاء التفاصيل بعد  مغادرة الفأرة لها
      $(this).next().slideUp(500);
    }, 300);
  });


//  عنصر التفاصيل

$(".img img")
  .next()
  .on("mouseover", function () {     // عند وضع المؤشر نوقف دالة الإخفاء
    clearTimeout(timeoutID);
    $(this).next().slideDown(500);
  })
  .on("mouseleave", function () {   // عند خروج المؤشر نخفي العنصر
    $(this).slideUp(500);
  });

حاول تبديل mouseover إلى mouseenter أو hover وأرجو توضيح المشكلة مثلا في فيديو ..

كما يمكنك تمرير حدث e ضمن function callback و استخدام e.target بدل this لأنها تستهدف العنصر بشكل أفضل.

جرب و أخبرنا بالنتيجة

بتاريخ 11 ساعات قال Wael Aljamal:

حاول تبديل mouseover إلى mouseenter أو hover وأرجو توضيح المشكلة مثلا في فيديو ..

كما يمكنك تمرير حدث e ضمن function callback و استخدام e.target بدل this لأنها تستهدف العنصر بشكل أفضل.

جرب و أخبرنا بالنتيجة

 

اشكر حضرتك

انا بالفعل كنت بعت ملف المشروع

ملف activity.js