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