ב-CSS, סוגים שונים של סמנים משמשים עבור רכיבי HTML שונים, וכדי לשנות את סוג הסמן, ' סַמָן ' נעשה שימוש בנכס. זה מאפשר לך לשנות את סוג הסמן ולהגדיר את ערך הסמן שברצונך להציג על המסך. כתכונה נוספת, היא גם מאפשרת לך להגדיר תמונת סמן משלך.

במדריך זה תלמדו:

• מהו מאפיין CSS של הסמן
• כיצד לשנות את הסמן לתמונה ב-Hover באמצעות CSS

אז הבה נתחיל!

מהו מאפיין CSS 'סמן'?

כדי לשלוט במראה העכבר על רכיב HTML, ' סַמָן ניתן להשתמש במאפיין של CSS. זה מאפשר לשנות את הסמן הרגיל לסוגים שונים כגון סמן העתקה, מצביע יד, גריפ ועוד רבים. אתה יכול גם להגדיר סמן מותאם אישית משלך על ידי הגדרת כתובת האתר של התמונה במאפיין הסמן.

תחביר

התחביר של מאפיין הסמן ניתן כ:

בתחביר הנתון לעיל, הקצה את הנתיב של התמונה ב' url() ' שאתה רוצה להציג על המסך.

כעת נעבור לדוגמא כדי לשנות את הסמן הרגיל לתמונה בהרחף.

כיצד לשנות את הסמן לתמונה ברחף באמצעות CSS?

כדי לשנות את הסמן לתמונה עם ריחוף, תחילה הוסף אלמנט ב-HTML.

דוגמה 1: שינוי הסמן לתמונה ברחף באמצעות מאפיין הסמן

אנו ניצור כותרת

ואת שם המחלקה ' btn '.

HTML

< גוּף >
< h1 > שנה את הסמן לתמונה ברחף h1 >
< לַחְצָן מעמד = 'btn' > לחץ עלי לַחְצָן >
גוּף >

נכון לעכשיו, ריחוף על הכפתור יציג את סמן ברירת המחדל:

כעת עבור ל-CSS ושנה את הסמן לתמונה.

לאחר מכן, הגדר את הנתיב של התמונה ב-' url() '. לדוגמה, ציינו 'i with.svg ' כתמונה שנבחרה שלנו. לאחר מכן, הגדר את הערך של מאפיין הסמן כ' אוטומטי '.

CSS

.btn {
סמן: url ( icon.svg ) , אוטומטי;
ריפוד: 10px;
}

שמור את הקוד לעיל והפעל את קובץ ה-HTML כדי לראות את התוצאה הבאה:

הפלט הנתון מציין שהסמן הוחלף בהצלחה לתמונה כשהיא מרחפת.

הערה: ' אוטומטי ' משמש כאפשרות חלופית במאפיין הסמן; כאשר התמונה לא נטענת, או נתיב הקובץ או הקובץ עצמו חסר, סמל ברירת המחדל מוצג על המסך בגלל הערך האוטומטי.

דוגמה 2: הגדרת סמן ברירת מחדל ברחף

לדוגמה, ניתן את כתובת ה-URL של התמונה ורק נגדיר את הערך של מאפיין הסמן כ' אוטומטי ”:

סמן: url ( ) , אוטומטי;

כתוצאה מכך, הסמן לא ישתנה כאשר ירחף מעל הכפתור:

דוגמה 3: הגדרת תמונה אלטרנטיבית ברחף

במקום האוטו, תוכל להגדיר ערכים שונים של הסמן שברצונך להציג כחלופה לתמונה. לדוגמה, נשנה את הערך של מאפיין הסמן מ' אוטומטי ' ל ' מַצבִּיעַ ”:

סמן: url ( ) , מצביע;

כפי שניתן לראות בפלט למטה, הסמן משתנה למצביע יד כאשר הוא מרחף מעל הכפתור:

סיפקנו את השיטה הקלה ביותר לשינוי תמונת הסמן ברחף באמצעות CSS.

סיכום

ב-CSS, אתה יכול לשנות את הסמן לתמונה עם ריחוף באמצעות ' סַמָן ' תכונה. זה מאפשר לשנות סמן רגיל לתמונה על ידי הקצאת ' כתובת אתר ' של התמונה למאפיין הסמן. אתה יכול להחיל כל סוג של סמן שאתה רוצה להציג כאשר הוא מרחף על אלמנט. מאמר זה הדגים את השיטה של ​​שינוי הסמן למצביע יד.