3.1 KiB
title | localeTitle |
---|---|
Hover | يحوم |
يحوم
The selector:hover
يتم تشغيل فئة pseudo-class عند التفاعل مع العنصر (selector) مع وجود جهاز تأشير بشكل عام مؤشر الماوس. سيتم تجاوز أنماط العنصر المحلق فوق من خلال النمط المحدد في selector:hover
فئة زائفة. لوضع روابط / عناصر نمطية يجب تعريف القواعد بالترتيب: : link -: visited -: hover -: active
بناء الجملة :
selector:hover { css declarations; }
مزيد من الأمثلة
في ما يلي بعض الأمثلة الأكثر تعقيدًا عما يمكنك فعله باستخدام :hover
فئة زائفة :hover
. نضع في اعتبارنا أن .second
شعبة يجب أن يأتي بعد .first
شعبة في كل من هذه الأمثلة.
- عندما تقوم بتحريك مؤشر الماوس فوق عنصر ما ، قم بتغيير الأخوة المجاورة.
`
سيعمل الرمز أعلاه على تغيير لون خلفية .second
إلى blue عند تحريك مؤشر الماوس فوق .first
.
- عندما تقوم بتحريك مؤشر الماوس فوق عنصر ما ، قم بتغيير الأخوة العامة.
`
يعطي هذا المثال مرونة أكثر قليلاً حيث لم يعد من الضروري أن يكون العنصران متجاورين مباشرة.
- عندما تقوم بتحريك مؤشر الماوس فوق عنصر ما ، قم بتغيير سليل مباشر.
`
سيعمل الرمز أعلاه على تغيير لون خلفية .second
إلى blue عند تحريك مؤشر الماوس فوق .first
.
- عندما تقوم بتحريك مؤشر الماوس فوق عنصر ، قم بتغيير سلال عام.
`
وكما في المثال 2 ، فإن هذا يمنح المزيد من المرونة حيث أن العنصرين لم يعد من الضروري أن يكونا متجاورين مباشرة. ستلاحظ أن المساحة التي يمكن .first
أكبر في الأمثلة 3 و 4. يحدث هذا لأنك لا تزال تحوم فوق .first
ما دام المؤشر فوق أحد أطفاله.