كشف الغموض: لماذا تفشل رؤية CSS عند التحويم

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

الغوص في السبب

يكمن السبب وراء هذا السلوك المحير في الطبيعة. من العناصر المخفية. عندما يتم إخفاء عنصر باستخدام "الرؤية: مخفي"، يصبح غير مرئي بشكل فعال ولا يستهلك أي مساحة في تخطيط الصفحة. هذا يعني أن محاولة المرور فوقه تشبه في الأساس محاولة التفاعل مع الفراغ. العنصر ببساطة لا يسجل إجراء التمرير.

حل معضلة الرؤية

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

CSS:

.spoiler span {
    visibility: hidden;
}

.spoiler:hover span {
    visibility: visible;
}

HTML:

Spoiler: E.T. phones home.

شرح:

من خلال دمج النص المخفي داخل عنصر الامتداد، فإنك تضمن بقاء عنصر المفسد الخارجي مرئيًا ، مما يسمح له بالتقاط حدث التحويم. عندما يحدث التمرير، يصبح عنصر الامتداد الداخلي مرئيًا، ويكشف عن النص المفسد.

اعتبارات إضافية

في بعض المتصفحات مثل Chrome، قد تواجه مشكلة بسيطة حيث لا يزال عنصر المفسد المخفي قابلاً للتحديد قليلاً باستخدام الماوس. لمعالجة هذه المشكلة، يمكنك إضافة مخطط تفصيلي لعنصر المفسد:

.spoiler {
    outline: 1px solid transparent;
}

يضمن هذا المخطط التفصيلي الشفاف أن يكون لعنصر الحرق حجم كافٍ لاستقبال حدث التمرير دون إعاقة الرؤية العامة للنص.

مع هذه التعديلات، ستعمل فئة الحرق الخاصة بك بشكل لا تشوبه شائبة، مع الحفاظ على إخفاء النص المخفي وتوفير تجربة تحوم سلسة.