ما هو CSS هوفر؟
يطبق محدد :hover في CSS الأنماط على عنصر أثناء تحريك المؤشر فوقه. يتم استخدامه بشكل متكرر لإنتاج تأثيرات تفاعلية أو لجذب الانتباه إلى العناصر عند التفاعل معها.
يمكنك استهداف عنصر باستخدام محدد hover باستخدام اسم العلامة أو الفئة أو المعرف الخاص به.
على سبيل المثال:
تم فرز مجموعة جافا
.button:hover { background-color: #ff0000; color: #ffffff; } سيتحول لون الخلفية في المثال السابق إلى اللون الأحمر (#ff0000) عندما يقوم المستخدم بالتمرير فوق عنصر يحتوي على 'زر' الفئة، بينما سيتحول لون النص إلى اللون الأبيض (#ffffff).
يمكن إنتاج تأثيرات التمرير المختلفة من خلال دمج محدد :hover مع عناصر CSS الأخرى مثل حجم الخط أو الحدود أو التحويل. إنها أداة فعالة لتعزيز التعليقات المرئية والتفاعلية لموقعك على الويب أو تطبيقك.
بناء الجملة:
:hover { css declarations; } لنأخذ بعض الأمثلة لفهم التمرير باستخدام CSS:
مثال 1:
كود HTML:
Hover Me
كود CSS:
جافا system.out.println
.hover-button { background-color: #eaeaea; color: #333333; padding: 10px 20px; border: none; cursor: pointer; transition: background-color 0.3s ease; } .hover-button:hover { background-color: #ff0000; color: #ffffff; } توضيح:
في المثال أعلاه، لدينا زر به زر تمرير للفئة. مجموعات الألوان الأولية للزر هي خلفية رمادية فاتحة (#eaeaea) ونص رمادي داكن (#333333). عندما يمرر الماوس فوق الزر، يتغير لون الخلفية إلى اللون الأحمر (#ff0000) ولون النص إلى الأبيض (#ffffff).
مع مدة تبلغ 0.3 ثانية ووظيفة توقيت سهلة، تضمن خاصية الانتقال في فئة زر التمرير انتقالًا سلسًا لتغيير لون الخلفية عند تمرير الماوس فوق الزر.
عناصر أخرى، مثل الروابط ( )، الصور ( )، div ( )، أو أي عنصر آخر تريد جعله تفاعليًا، يمكنه استخدام تأثيرات التمرير المماثلة. يمكنك إنشاء العديد من تأثيرات التمرير التي تناسب احتياجات التصميم الخاصة بك عن طريق تغيير الخصائص والقيم داخل محدد التمرير:.
مثال 2: تأثير تكبير الصورة
كود HTML:
كود CSS:
dateformat.format جافا
.image-zoom { overflow: hidden; } .image-zoom img { transition: transform 0.3s ease; } .image-zoom:hover img { transform: scale(1.2); } المثال 3: تأثير تسطير الرابط
كود HTML:
<a href="#">Hover Me</a>
كود CSS:
.underline-link { text-decoration: none; transition: border-bottom 0.3s ease; } .underline-link:hover { border-bottom: 2px solid #ff0000; } ميزة التحويم في CSS
يمكنك تحسين التفاعل والمؤثرات المرئية لصفحات الويب الخاصة بك عن طريق استخدام ميزة CSS:hover، والتي توفر مجموعة متنوعة من المزايا والميزات. فيما يلي بعض ميزات التحويم الأساسية في CSS: