تغيير لون خلفية الحاوية الرئيسية عند تمرير الطفل (CSS فقط)

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

Pointer-Events and Hover:

لتحقيق هذا التأثير، يمكننا التعامل مع أحداث المؤشر ومجموعة :hover pseudo-class:

1. أحداث المؤشر: لا شيء على الأصل. هذا يمنع العنصر الأصل من تلقي أي أحداث تحويم.
2. حدد تغيير لون خلفية الأصل المطلوب عند التمرير.
3. ضبط أحداث المؤشر: تلقائي على الطفل. يسمح هذا للعنصر الفرعي بتشغيل أحداث التمرير، على الرغم من تجاهل العنصر الأصلي لهم.

مثال:

div {
  height: 200px;
  width: 200px;
  text-align: center;
  pointer-events: none;
}
div:hover {
  background: #F00;
}
div > a {
  pointer-events: auto;
}

  Anchor Text

يلتقط هذا الحل بشكل فعال حدث التمرير على العنصر الفرعي، مما يسمح لخلفية الحاوية الأصلية بالتغيير عند تمرير العنصر الفرعي، كل ذلك بدون استخدام JavaScript.