محدد حالة التمرير :hover

الصياغة

.card { transition: border-color 0.2s; }
.card:hover { border-color: #7c5cff; }
.btn:active { transform: scale(0.97); }

⚡ جرّب بنفسك

عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.

<style>
  .h { display: inline-block; background: white; border: 2px solid #e5e0f0; border-radius: 12px; padding: 14px 22px; transition: all 0.2s ease; cursor: pointer; font-weight: bold; }
  .h:hover { border-color: #7c5cff; color: #6d28d9; box-shadow: 0 8px 20px rgb(124 92 255 / 0.35); transform: translateY(-3px); }
  .h:active { transform: translateY(0) scale(0.98); }
</style>
<span class="h">مرّر ثم اضغط — حالتان مختلفتان</span>

أهم القيم

💡 نصائح عملية

• ثلاثية الزر الحي: hover يرفع + active يضغط + focus-visible يحلّق — إحساس مكتمل
• على الأجهزة الدقيقة فقط: لف الهفر بـ @media (hover: hover) لتجنب «التصاقه» باللمس

⚠️ أخطاء شائعة

• إخفاء معلومات أساسية خلف الهفر — نصف زوارك (الجوال) لن يروها أبدًا
• إزالة outline التركيز بلا بديل focus-visible — كارثة وصولية

خصائص ذات صلة