מטרת מדריך זה היא לחקור כיצד לשנות תמונה על ריחוף באמצעות CSS. אז, בואו נתחיל!
מה זה :hover ב-CSS?
ה-:hover הוא רכיב של פסאודו-קלאס המשמש לשינוי מצב רכיבי HTML כאשר עכבר מפעיל אותו. בורר CSS זה משמש בעיקר לסגנון או בחירת אלמנטים. עם זאת, לא ניתן להחיל אותו על קישורים.
תחביר
התחביר של :hover ניתן להלן:
אֵלֵמֶנט : לְרַחֵף {
קוד CSS. . .
}
כאן, ' אֵלֵמֶנט ' מתייחס לאלמנט שבו אתה רוצה להחיל את אפקט הריחוף.
כעת, נעבור לדוגמא המעשית של שינוי התמונה ברחף באמצעות CSS.
דוגמה: כיצד לשנות תמונה ברחף באמצעות CSS?
כדי לשנות את התמונה עם ריחוף תחילה, הוסף שתי תמונות בקטע HTML. התמונה הראשונה היא עבור המצב הפעיל, והאחרת היא עבור מצב הריחוף.
שלב 1: הוסף תמונות
למטרה שצוינה, נוסיף שתי תמונות, ' תמונה 1 ' ו' תמונה 2 ', והקצה את שם הכיתה לתמונה השנייה בתור ' hover_img '.
HTML
< גוּף >< div מעמד = 'אימג' >
< img src = 'image1.png' >
< img src = 'image2.png' מעמד = 'hover_img' >
< / div >
< / גוּף >
שלב 2: סגנון תמונות
כעת, עבור ל-CSS כדי להגדיר את המיקום של שתי התמונות באמצעות ' עמדה ' תכונה. נגדיר את עמדתה כ' מוּחלָט 'למצב אותו באופן מוחלט בהתייחסות להורה הקרוב ביותר שלו.
CSS
.img {עמדה : מוּחלָט ;
}
זה יראה את התוצאה הבאה:
בשלב הבא, נגדיר את התמונה השנייה לפני הראשונה. לשם כך, נגדיר את מיקום התמונה כ' מוּחלָט ' וקבע את המיקום העליון והשמאלי כ' 0 '. שימוש בתמונה זו ממוקם מול התמונה הראשונה, אך אנו רוצים להציג את התמונה השנייה כאשר עכבר מרחף עליה. אז, הגדרת ערך התצוגה כ' אף אחד ' יציג את התוצאה הרצויה:
.hover_img {עמדה : מוּחלָט ;
חלק עליון : 0 ;
שמאלה : 0 ;
לְהַצִיג : אף אחד ;
}
הפלט של הקוד הנתון הוא כדלקמן:
התמונה השנייה מוסתרת בהצלחה מאחורי התמונה הראשונה.
כעת, עבור לשלב הבא.
שלב 3: שנה תמונה ברחף
לאחר מכן, השתמש ב' :לְרַחֵף ' ובחר ' .img ' כדי להחיל ריחוף על האלמנט שנבחר. לאחר מכן, הקצה את שם הכיתה של התמונה השנייה ' .hover_img '. לאחר מכן, בתוך הסוגריים, הגדר את הערך של מאפיין התצוגה כ' בשורה ' שיאלץ את האלמנט להתאים באותה שורה:
.img : לְרַחֵף .hover_img {לְהַצִיג : בשורה ;
}
הנה התוצאה שמדגימה שהתמונה משתנה כאשר המשתמש מרחף עליה:
הפלט הנתון לעיל מצביע על כך ששינינו בהצלחה את התמונה ברחף באמצעות CSS.
סיכום
ניתן לשנות תמונה עם ריחוף באמצעות ' :לְרַחֵף 'אלמנט פסאודו-קלאסי. לשם כך, הוסף את התמונות הנדרשות לקובץ ה-HTML, הגדר אותן באותו מיקום באמצעות CSS והחל עליהן את הבורר :hover. כתוצאה מכך, התמונה הראשונה תשתנה כאשר תרחף מעליה. במאמר זה, הסברנו כיצד לשנות תמונה ברחף באמצעות ה-:hover עם דוגמה מעשית.