وثائق CSS قابلة للتشغيل: hover في CSS

Q: كيف أضيف تأثير hover في CSS؟

اكتب قاعدة مع :hover بعد المحدد: .btn:hover { background: #1d4ed8; }. تنطبق التصريحات ما دام المؤشر فوق العنصر. أضف transition: background 0.2s; إلى القاعدة العادية لتحريك التغيير.

Q: ما الفرق بين :hover و:active؟

ينطبق :hover ما دام المؤشر فوق العنصر. أما :active فينطبق أثناء الضغط عليه، من ضغط زر الفأرة حتى تحريره. الزر المضغوط عادةً يكون في حالتي hover وactive معًا.

Q: ما الترتيب الصحيح للفئات الزائفة الخاصة بالروابط؟

:link ثم :visited ثم :hover ثم :active (تذكّر LVHA، أو "LoVe HAte"). خصوصيتها متساوية، لذلك تفوز القاعدة اللاحقة؛ وبأي ترتيب آخر قد يخفي نمط الرابط المزار أو الممرَّر فوقه نمط hover أو active.

Q: كيف أغيّر لون الرابط في CSS؟

نسّق العنصر a: a { color: #2563eb; }، ثم a:visited { color: #7c3aed; } وa:hover { color: #1d4ed8; } للحالات الأخرى. ضبط color على a يغطي الروابط المزارة وغير المزارة معًا.

كيف يعمل :hover

:hover فئة زائفة تطابق العنصر ما دام مؤشر الفأرة فوقه. أضفها إلى أي محدد واكتب أنماط حالة التمرير:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hover</title>
  <style>
    .btn {
      background: #2563eb;
      color: white;
      border: 0;
      padding: 10px 18px;
      border-radius: 6px;
      font-size: 16px;
      cursor: pointer;
    }
    .btn:hover {
      background: #1d4ed8;
    }
  </style>
</head>
<body>
  <button class="btn">Hover me</button>
</body>
</html>

تتغير التصريحات الموجودة في قاعدة :hover فقط؛ وكل ما عداها يُنقل من .btn. حين يغادر المؤشر يعود العنصر إلى أنماطه العادية.

تأثيرات تمرير سلسة مع transition

تغيير hover فوري ما لم تضف transition إلى القاعدة العادية (لا إلى قاعدة :hover)، فيتحرك التغيير عند الدخول والخروج معًا:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hover transition</title>
  <style>
    .card {
      width: 220px;
      padding: 16px;
      border: 2px solid #e5e7eb;
      border-radius: 10px;
      background: white;
      transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    }
    .card:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 20px rgba(17, 24, 39, 0.15);
      border-color: #2563eb;
    }
  </style>
</head>
<body>
  <div class="card">Hover the card: it lifts, gains a shadow and a blue border.</div>
</body>
</html>

transform وopacity هما أرخص الخصائص تحريكًا؛ فهما لا تحرّكان العناصر المحيطة. تحريك width أو height أو margin يجعل الصفحة تعيد حساب التخطيط في كل إطار. المدد والتأخيرات ومنحنيات التسارع موجودة في صفحة transition في CSS.

ألوان الروابط: :link و:visited و:hover و:active

للروابط أربع حالات كلاسيكية، إضافةً إلى تركيز لوحة المفاتيح، وترتيب القواعد مهم:

الفئة الزائفة	تنطبق حين
`:link`	لم تُزر الرابط بعد
`:visited`	يكون العنوان في سجل المتصفح
`:hover`	يكون المؤشر فوقه
`:active`	يكون قيد الضغط
`:focus-visible`	يكون عليه تركيز لوحة المفاتيح

لكل هذه الفئات الخصوصية نفسها، لذلك تفوز القاعدة اللاحقة حين تتطابق اثنتان. الرابط المزار الذي يمر فوقه المؤشر يطابق :visited و:hover معًا؛ فإن جاءت :visited أخيرًا لا يظهر لون hover أبدًا. الترتيب الآمن هو Link ثم Visited ثم Hover ثم Active (LVHA):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Link states</title>
  <style>
    a:link    { color: #2563eb; }
    a:visited { color: #7c3aed; }
    a:hover   { color: #16a34a; text-decoration-thickness: 3px; }
    a:active  { color: #f59e0b; }
    a:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
  </style>
</head>
<body>
  <p><a href="https://example.com/never-visited-page">Hover, then press and hold this link</a></p>
</body>
</html>

تقيّد المتصفحات ما يمكن لـ :visited تغييره، كي لا تتمكن الصفحات من قراءة سجل تصفحك. الخصائص المتعلقة باللون فقط (color وbackground-color وborder-color وoutline-color وبضع خصائص أخرى) هي التي تعمل، والسكربتات ترى دائمًا القيمة غير المزارة.

:active: حالة الضغط

تطابق :active العنصر أثناء الضغط عليه. حركة صغيرة تجعل الزر يبدو ملموسًا:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Active</title>
  <style>
    .btn {
      background: #16a34a;
      color: white;
      border: 0;
      padding: 10px 18px;
      border-radius: 6px;
      box-shadow: 0 4px 0 #166534;
      transition: transform 0.05s, box-shadow 0.05s;
    }
    .btn:hover { background: #15803d; }
    .btn:active {
      transform: translateY(4px);
      box-shadow: 0 0 0 #166534;
    }
    .btn:focus-visible { outline: 3px solid #2563eb; outline-offset: 3px; }
  </style>
</head>
<body>
  <button class="btn">Press me</button>
</body>
</html>

التمرير فوق الأب لتنسيق الابن

حالة التمرير تخص العنصر الذي تحت المؤشر وكل أسلافه. لذلك تنسق .card:hover .title العنوان كلما مرّ المؤشر فوق أي جزء من البطاقة، والفكرة نفسها تُظهر العناصر المخفية:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hover parent</title>
  <style>
    .item {
      display: flex;
      justify-content: space-between;
      border: 1px solid #e5e7eb;
      padding: 10px;
      width: 260px;
    }
    .item .actions { opacity: 0; transition: opacity 0.15s; }
    .item:hover .actions,
    .item:focus-within .actions { opacity: 1; }
    .item:hover { background: #eff6ff; }
    .item:hover .name { color: #2563eb; }
  </style>
</head>
<body>
  <div class="item">
    <span class="name">report.pdf</span>
    <span class="actions"><button>Delete</button></span>
  </div>
</body>
</html>

سطر :focus-within مهم: من دونه سيضغط مستخدم لوحة المفاتيح الذي ينتقل بـ Tab إلى زر الحذف على زر غير مرئي. اقرن كل إظهار بالتمرير بقاعدة للتركيز.

hover على الشاشات اللمسية

الهواتف والأجهزة اللوحية لا تملك مؤشرًا يستقر فوق العنصر. معظم متصفحات الهاتف تطبّق :hover عند النقرة الأولى وتبقيه حتى تنقر في مكان آخر، فقد يبدو نمط hover عالقًا. قاعدتان تبقيان هذا تحت السيطرة:

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

@media (hover: hover) {
  .card:hover { transform: translateY(-4px); }
}

أخطاء شائعة

مسافة قبل النقطتين. .btn :hover تعني «عنصر ممرَّر فوقه داخل .btn». اكتب .btn:hover.
transition على قاعدة :hover وحدها. عندها يتحرك التغيير عند الدخول لكنه يرتد فجأة عند الخروج. ضعها على القاعدة العادية.
ترتيب خاطئ للروابط. أبقِ :link و:visited و:hover و:active بهذا الترتيب.
hover من دون نمط تركيز. مستخدمو لوحة المفاتيح لا يفعّلون :hover أبدًا؛ أعطِ العناصر التفاعلية نمط :focus-visible أيضًا.
hover على عنصر يغطيه عنصر آخر. طبقة غير مرئية (غالبًا عنصر زائف بموضع مطلق) قد تلتقط المؤشر. pointer-events: none على الطبقة يحل المشكلة.

الأسئلة الشائعة

كيف أضيف تأثير hover في CSS؟

اكتب قاعدة مع :hover بعد المحدد: .btn:hover { background: #1d4ed8; }. تنطبق التصريحات ما دام المؤشر فوق العنصر. أضف transition: background 0.2s; إلى القاعدة العادية لتحريك التغيير.

ما الفرق بين :hover و:active؟

ينطبق :hover ما دام المؤشر فوق العنصر. أما :active فينطبق أثناء الضغط عليه، من ضغط زر الفأرة حتى تحريره. الزر المضغوط عادةً يكون في حالتي hover وactive معًا.

ما الترتيب الصحيح للفئات الزائفة الخاصة بالروابط؟

:link ثم :visited ثم :hover ثم :active (تذكّر LVHA، أو "LoVe HAte"). خصوصيتها متساوية، لذلك تفوز القاعدة اللاحقة؛ وبأي ترتيب آخر قد يخفي نمط الرابط المزار أو الممرَّر فوقه نمط hover أو active.

كيف أغيّر لون الرابط في CSS؟

نسّق العنصر a: a { color: #2563eb; }، ثم a:visited { color: #7c3aed; } وa:hover { color: #1d4ed8; } للحالات الأخرى. ضبط color على a يغطي الروابط المزارة وغير المزارة معًا.

هل يعمل hover على الهاتف؟

الشاشات اللمسية لا تملك مؤشرًا يستقر فوق العنصر. معظم متصفحات الهاتف تطبّق :hover عند النقر وتبقيه حتى تنقر في مكان آخر، مما قد يترك نمط hover عالقًا. أحط التأثيرات الخاصة بالتمرير بـ @media (hover: hover) ولا تخفِ أبدًا محتوى أساسيًا خلف hover.

مفاهيم ذات صلة