الضبط: hover Animation لتفاعل الأجهزة المحمولة

لقد واجهت مشكلة حيث لا يتم تشغيل الرسوم المتحركة :hover CSS، التي تعمل على توسيع اللوحة، على الهاتف المحمول الأجهزة بسبب عدم وجود حركة الماوس. لمعالجة هذه المشكلة، تهدف إلى تبديل المشغل إلى "النقر" أو "اللمس" عندما يكون عرض الصفحة أقل من 700 بكسل.

لتحقيق ذلك، يمكنك استخدام مجموعة من المحددات :hover و :active. من خلال ترتيب المحددات باستخدام :active بعد :hover في CSS الخاص بك، يمكنك التأكد من أن إجراءات اللمس أو النقر على اللوحة الخاصة بك ستؤدي أيضًا إلى تشغيل الرسوم المتحركة. إليك تحديث CSS:

.info-slide:hover, .info-slide:active {
  height: 300px;
}

يضمن هذا التغيير توسيع اللوحة عند التمرير أو اللمس على كل من أجهزة سطح المكتب والأجهزة المحمولة. للتحقق من وظائفه، يوصى باختباره في بيئة متنقلة فعلية، حيث قد لا تقدم أجهزة المحاكاة نتائج دقيقة.