בכתבה זו, נרחיב כיצד להשתמש במאפיין CSS pointer-events.
מהו מאפיין מצביע-אירועים?
CSS ' אירועי מצביע ' המאפיין מציין את התנהגות המצביע/הקשה כלפי אלמנט ה-HTML והאם האלמנט הנבחר יגיב על ידי ביצוע פעולות כגון ריחוף או לחיצה.
כיצד להשתמש בנכס מצביע-אירועים?
ב-CSS, ניתן להשתמש במאפיין pointer-events כדי להפעיל או להשבית פעולות מצביע ברכיבי HTML ספציפיים. התחביר של המאפיין pointer-events ניתן להלן.
תחביר
אירועי מצביע : אף אחד | אוטומטי ;
בתחביר המוזכר, ' אוטומטי ' הוא ערך ברירת המחדל של המאפיין pointer-events, והוא מאפשר את פעולת המצביע כלפי אלמנט, ו' אף אחד ” הוא הפוך לחלוטין לאוטו; זה משבית את פעולת המצביע על רכיבי HTML.
בואו נתקדם וניקח דוגמה כדי להבין את המאפיין pointer-events.
דוגמה 1
בקובץ ה-HTML שלנו, ציין תג עוגן עם הטקסט ' LinuxHint.io ' ומניחים אותו בתוך קטע הגוף.
HTML
< א href = 'https://www.linuxhint.io/' > LinuxHint.io < / א >כעת, נשתמש ב' אירועי מצביע ' מאפיין ולהקצות לו ערך ' אף אחד '. פעולה זו תשבית את פעולת המצביע באלמנט.
CSS
א {אירועי מצביע : אף אחד ;
}
שמור את קובץ ה-HTML שלך עם הקוד שהוזכר והפעל אותו באמצעות הדפדפן שלך:
בואו ניקח דוגמה נוספת כדי לכסות את המאפיין מצביע-אירועים לעומק.
דוגמה 2
הגדר את ערך המאפיין מצביע-אירועים ל' אוטומטי ' הפעם. זה יגרום לאלמנט להגיב מעל מצביע או לחיצה. עם זאת, אוטומטי הוא ערך ברירת המחדל של המאפיין pointer-events.
CSS
א {אירועי מצביע : אוטומטי ;
}
תְפוּקָה
כיסינו שימושים שונים במאפיין CSS pointer-events.
סיכום
כדי לשלוט בפעולות המצביע, אנו יכולים להשתמש ב-CSS ' אירועי מצביע ' תכונה. ה ' אוטומטי ' ערך הוא הערך המוגדר מראש של מאפיין זה; זה מאפשר את הפעולות על רכיבי HTML. כאשר נעשה שימוש במאפיין pointer-events עם הערך ' אף אחד ', זה משבית את הפעולות כלפי אלמנט מסוים. כתיבה זו הדגימה כיצד להשתמש במאפיין CSS pointer-events.