מה זה 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:

אפקט אינטראקטיבי:ניתן להפיק אפקטים אינטראקטיביים על ידי שינוי המראה של אלמנטים כאשר מרחפים מעל באמצעות הבורר :hover. כאשר משתמשים מקיימים אינטראקציה עם התוכן שלך, אתה יכול לשנות מאפיינים כמו צבע רקע, צבע טקסט, אטימות, צל תיבה, טרנספורמציה ועוד כדי להראות להם משוב חזותי.מיקוד לרכיבים מרובים:אתה יכול לבחור אלמנטים מרובים בדף עם הבורר :hover. זה מרמז שאתה יכול לעצב אפקטי ריחוף סטנדרטיים עבור אלמנטים שונים, כולל לחצנים, קישורים, תמונות, תפריטי ניווט וכל אלמנט אחר שתרצה להפוך לאינטראקטיבי.תמיכה במעברים ואנימציות:ניתן להשתמש בבורר :hover עם מעברי CSS והנפשות כדי לייצר אפקטים חלקים ואסתטיים. על ידי הגדרת מאפייני מעבר או הנפשה, אתה יכול לציין את משך הזמן, פונקציית התזמון והגדרות אחרות הקשורות להנפשה כדי לווסת כיצד הסגנונות משתנים כאשר מרחפת אלמנט מעל.הוספת בוררים נוספים:ניתן להשתמש בבורר :hover עם בוררי CSS אחרים כדי להתמקד באלמנטים מסוימים או להחיל סגנונות לפי קריטריונים מוגדרים מראש. לדוגמה, אתה יכול ליצור אפקטים ייחודיים ומותאמים לרחף על ידי שילוב של הבורר :hover עם בוררי מחלקות, בוררי מזהה או אלמנטים פסאודו.תמיכה בנגישות:יש לקחת בחשבון נגישות בעת פיתוח אפקטי ריחוף. ייתכן שלמשתמשים בטכנולוגיות מסייעות המשתמשים בסמן, כגון קוראי מסך, לא תהיה גישה לאפקט הריחוף. בשל כך, מומלץ לבדוק שהפונקציונליות או התוכן העיקריים עדיין קריאים ושמישים ללא אפקטים של ריחוף.תמיכה בין דפדפנים:רוב דפדפני האינטרנט המודרניים תומכים בתכונת CSS: הרחף. זהו רכיב מפרט CSS התואם לרוב הדפדפנים הנפוצים, כולל Chrome, Firefox, Safari, Edge ואחרים. זה מבטיח עקביות במראה ובהתנהגות על פני פלטפורמות שונות.