ثلاث طرق لإخفاء عنصر في CSS، كل منها له سلوك مختلف:
**display: none:** - العنصر غير مرئي + لا يحجز مساحة + لا يمكن النقر عليه. - يُزال من التدفق الطبيعي كلياً. - أبناؤه يُخفَون أيضاً حتى لو كان display: block.
**visibility: hidden:** - العنصر غير مرئي + يحجز مساحته + لا يمكن النقر عليه. - الأبناء يمكن إظهارهم بـ visibility: visible بشكل مستقل.
**opacity: 0:** - العنصر غير مرئي + يحجز مساحته + يمكن النقر عليه (!) - يمكن تحريكه مع transition.
**pointer-events: none:** - العنصر مرئي لكن لا يستجيب للنقر أو الـ hover.
**متى تستخدم أيّاً:** | الحالة | الحل | |---|---| | إزالة تامة | display: none | | إخفاء مع الحفاظ على المساحة | visibility: hidden | | انتقال fade in/out | opacity مع transition | | تعطيل التفاعل فقط | pointer-events: none |
| 1 | /* إزالة كاملة */ |
| 2 | .hidden { display: none; } |
| 3 | |
| 4 | /* إخفاء مع الحفاظ على المساحة */ |
| 5 | .invisible { visibility: hidden; } |
| 6 | |
| 7 | /* fade out مع الاحتفاظ بالتفاعل */ |
| 8 | .faded { opacity: 0; pointer-events: none; } |
| 9 | |
| 10 | /* انتقال سلس */ |
| 11 | .tooltip { |
| 12 | opacity: 0; |
| 13 | visibility: hidden; |
| 14 | transition: opacity 0.2s, visibility 0.2s; |
| 15 | } |
| 16 | .parent:hover .tooltip { opacity: 1; visibility: visible; } |
مثال 1: Tooltip متحرك
| 1 | .tooltip-wrapper { position: relative; display: inline-block; } |
| 2 | |
| 3 | .tooltip-text { |
| 4 | position: absolute; |
| 5 | bottom: calc(100% + 8px); |
| 6 | left: 50%; |
| 7 | transform: translateX(-50%); |
| 8 | background: #0f172a; |
| 9 | color: white; |
| 10 | padding: 6px 12px; |
| 11 | border-radius: 6px; |
| 12 | font-size: 0.8rem; |
| 13 | white-space: nowrap; |
| 14 | |
| 15 | /* إخفاء مع انتقال */ |
| 16 | opacity: 0; |
| 17 | visibility: hidden; |
| 18 | transition: opacity 0.15s ease, visibility 0.15s ease; |
| 19 | } |
| 20 | |
| 21 | .tooltip-wrapper:hover .tooltip-text { |
| 22 | opacity: 1; |
| 23 | visibility: visible; |
| 24 | } |