. على الرغم من أن تأثير Hover يعرض صورة على حوم ، فقد تواجه معضلةها تختفي عندما ينتقل المستخدم بعيدًا عن العنصر. تعالج هذه المقالة هذه المسألة ، وتوجيه المبتدئين من خلال حلول CSS فقط. ومع ذلك ، بمجرد توقف تأثير التحويم ، يعود #Onabout إلى حالته المخفية الأولية. باستخدام تأخير الانتقال:

أضف خاصية الانتقال إلى العنصر الذي يؤدي تحوم حالة (في هذه الحالة ، #about). يمنح هذا التأخير تأثير التحويم لوقت مخزن مؤقت قبل حدوث الانتقال إلى الحالة الأصلية. فيما يلي مقتطف رمز مثال:

#About: Hover #Onabout { العرض: كتلة ؛ انتقالية التأخير: 180s ؛ }

عن طريق تحديد تأخير انتقال عالي (على سبيل المثال ، 180 ثانية) ، يمكنك تمديد المدة التي تظل خلالها حالة التحويم حتى بعد الابتعاد عن المؤشر. هذا يمنح المستخدم وقتًا كافيًا لاستيعاب الصورة التي تم الكشف عنها بصريًا. من خلال دمج Delay Transition ، يمكنك التأكد من أن حالات التحويم الخاصة بك تستمر خارج الإجراء الأولي للمستخدم ، مما يوفر تجربة مستخدم أكثر جاذبية.