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>
<div class="first">First</div>
<div class="second">Second</div>
سيعمل الرمز أعلاه على تغيير لون خلفية .second إلى blue عند تحريك مؤشر الماوس فوق .first .
- عندما تقوم بتحريك مؤشر الماوس فوق عنصر ما ، قم بتغيير الأخوة العامة.
<style>
.first:hover ~ .second {
background-color: blue;
}
</style>
<div class="first">First</div>
<div class="middle">Middle</div>
<div class="second">Second</div>
يعطي هذا المثال مرونة أكثر قليلاً حيث لم يعد من الضروري أن يكون العنصران متجاورين مباشرة.
- عندما تقوم بتحريك مؤشر الماوس فوق عنصر ما ، قم بتغيير سليل مباشر.
<style>
.first:hover > .second {
background-color: blue;
}
</style>
<div class="first">
First
<div class="second">Second</div>
</div>
سيعمل الرمز أعلاه على تغيير لون خلفية .second إلى blue عند تحريك مؤشر الماوس فوق .first .
- عندما تقوم بتحريك مؤشر الماوس فوق عنصر ، قم بتغيير سلال عام.
<style>
.first:hover .second {
background-color: blue;
}
</style>
<div class="first">
First
<div class="container">
Container
<div class="second">Second</div>
</div>
</div>
وكما في المثال 2 ، فإن هذا يمنح المزيد من المرونة حيث أن العنصرين لم يعد من الضروري أن يكونا متجاورين مباشرة. ستلاحظ أن المساحة التي يمكن .first أكبر في الأمثلة 3 و 4. يحدث هذا لأنك لا تزال تحوم فوق .first ما دام المؤشر فوق أحد أطفاله.