מה זה CSS Hover?
הבורר :hover ב-CSS מחיל סגנונות על אלמנט בעוד הסמן מרחף מעליו. הוא משמש לעתים קרובות כדי לייצר אפקטים אינטראקטיביים או כדי למשוך תשומת לב לאלמנטים כאשר הם נמצאים באינטראקציה איתם.
java בוליאני למחרוזת
אתה יכול למקד לרכיב באמצעות הבורר :hover באמצעות שם התג, המחלקה או המזהה שלו.
לדוגמה:
.button:hover { background-color: #ff0000; color: #ffffff; } צבע הרקע בדוגמה הקודמת יהפוך לאדום (#ff0000) כאשר משתמש ירחף מעל אלמנט עם 'כפתור' המחלקה, בעוד שצבע הטקסט יהפוך ללבן (#ffffff).
ניתן לייצר אפקטים שונים של ריחוף על ידי שילוב של בורר ה-:hover עם רכיבי CSS אחרים כמו גודל גופן, גבול או טרנספורמציה. זהו כלי רב עוצמה להגברת המשוב החזותי והאינטראקטיביות של האתר או האפליקציה שלך.
תחביר:
:hover { css declarations; } ניקח כמה דוגמאות להבנת ריחוף באמצעות CSS:
דוגמה 1:
קוד HTML:
Hover Me
קוד CSS:
.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 שניות ופונקציית תזמון קלה, תכונת המעבר במחלקת ה-hover-button מבטיח מעבר נוזלי לשינוי צבע הרקע כאשר העכבר מרחף מעל הכפתור.
אלמנטים אחרים, כגון קישורים ( ), תמונות ( ), divs ( ), או כל רכיב אחר שתרצו להפוך לאינטראקטיבי, יכולים להשתמש באפקטים דומים של ריחוף. אתה יכול ליצור אפקטי ריחוף שונים המותאמים לצרכי העיצוב שלך על ידי שינוי המאפיינים והערכים בבורר :hover.
דוגמה 2: אפקט זום תמונה
קוד HTML:
קוד CSS:
.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:
הדרכה של java swing
.underline-link { text-decoration: none; transition: border-bottom 0.3s ease; } .underline-link:hover { border-bottom: 2px solid #ff0000; } תכונה של Hover ב-CSS
אתה יכול לשפר את האינטראקטיביות והאפקטים החזותיים של דפי האינטרנט שלך באמצעות תכונת CSS:hover, המציעה מגוון יתרונות ותכונות. להלן כמה תכונות חיוניות לרחף CSS: