אני בטוח שלפחות פעם אחת כשניסיתם ליצור את האירוע :hover (מעבר עכבר) על אלמנט שהוא לא קישור, היו בעיות איתו בדפדפן Microsoft Internet Explorer לעומת הדפדפן Mozila FireFox שבו הכל פעל כשורה.
ישנן כל מיני תוספים להורדה שגורמים לcss שלכם בדרך כלל להיות לא תקין, וגורמים בעיות נוספות. במדריך זה נציג לפניכם פתרון, שיפתור את הבעיה חלקית.
אז כמו שאמרנו קודם, בדפדפן Internet Explorer ישנן באגים קטנים כשמתמשים באירוע :hover. אבל גם הזכרנו, שהבעיה אינה קוראת על קישורים. אז מה נעשה? נשתמש בקישורים! רוב התמונות שרוצים שהשתנו במעבר עכבר הם קישורים! אז לא תהיה בעיה! אם בכל זאת אתם רוצים ליצור אלמנט עם אירוע :hover שהוא לא קישור, נסו להשתמש בjavascript או בשפת סקריפטים אחרת.
אז עכשיו אתם חושבים לעצמכם:
אז מה עושים? מגדירים לקישור שלנו display:block. התכונה display אחראית על צורת ההצגה, יש לה שלושה ערכים חשובים: none,block,inline
none
אם ניתן לאלמנט מסוים ערך זה, פשוט לא יראו אותו, בניגוד לvisibility, אפילו לא ישמר לא מקום. אלמנט כזה הוא כאילו לא קיים בכלל! אפשר להשתמש בזה בשילוב עם שפת סקריפטים כדי ליצור דברים מאוד יפים.
block
כל אלמנט שמוגדר כבלוק יהיה מתחתיו שורה רווח וגם מעליו. אפשר להגדיר לו גם כל מיני תכונות נוספות: כמו גובה, רוחב, ומרגין דברים שאי אפשר לעשות לinline. דוגמא מצוינת לתג שזה ברירת המחדל שלו זה התג div. אם נהפוך את הקישור לblock, הוא פשוט יהיה כמו התג דיב ונוכל לתת לו כל תכונה שנרצה.
inline
דוגמא לתג inline הוא span. לתג inline אי אפשר לתת תכונות מסוימות כמו גובה, רוחב מרגין ועוד...
אז פשוט מאוד, כמו שהבנתם, פשוט עושים את הקישור שלנו ככה:
בהצלחה!
ישנן כל מיני תוספים להורדה שגורמים לcss שלכם בדרך כלל להיות לא תקין, וגורמים בעיות נוספות. במדריך זה נציג לפניכם פתרון, שיפתור את הבעיה חלקית.
אז כמו שאמרנו קודם, בדפדפן Internet Explorer ישנן באגים קטנים כשמתמשים באירוע :hover. אבל גם הזכרנו, שהבעיה אינה קוראת על קישורים. אז מה נעשה? נשתמש בקישורים! רוב התמונות שרוצים שהשתנו במעבר עכבר הם קישורים! אז לא תהיה בעיה! אם בכל זאת אתם רוצים ליצור אלמנט עם אירוע :hover שהוא לא קישור, נסו להשתמש בjavascript או בשפת סקריפטים אחרת.
אז עכשיו אתם חושבים לעצמכם:
אז אתם חושבים שניתן לInternet Explorer להרוס לנו את האתר? ממש לא!אני לא רוצה ליצור סתם קישור! אני רוצה שיהיה לו רקע, רוחב, גובה, ומסגרת מסביבו. אני גם לא רוצה, שהטקסט יתפרס על כל הדיב! אני רוצה שיהיה לו גם padding וmargin
אז מה עושים? מגדירים לקישור שלנו display:block. התכונה display אחראית על צורת ההצגה, יש לה שלושה ערכים חשובים: none,block,inline
none
אם ניתן לאלמנט מסוים ערך זה, פשוט לא יראו אותו, בניגוד לvisibility, אפילו לא ישמר לא מקום. אלמנט כזה הוא כאילו לא קיים בכלל! אפשר להשתמש בזה בשילוב עם שפת סקריפטים כדי ליצור דברים מאוד יפים.
block
כל אלמנט שמוגדר כבלוק יהיה מתחתיו שורה רווח וגם מעליו. אפשר להגדיר לו גם כל מיני תכונות נוספות: כמו גובה, רוחב, ומרגין דברים שאי אפשר לעשות לinline. דוגמא מצוינת לתג שזה ברירת המחדל שלו זה התג div. אם נהפוך את הקישור לblock, הוא פשוט יהיה כמו התג דיב ונוכל לתת לו כל תכונה שנרצה.
inline
דוגמא לתג inline הוא span. לתג inline אי אפשר לתת תכונות מסוימות כמו גובה, רוחב מרגין ועוד...
אז פשוט מאוד, כמו שהבנתם, פשוט עושים את הקישור שלנו ככה:
a.iehover {
display: block;
}
כעת נוכל לתת לו את כל התכונות שאתם מכירים ומשתמשים בדרך כלל על div. וגם להוסיף לו את האירוע :hover שיעבוד הפעם גם בInternet Explorer!display: block;
}
בהצלחה!
אודות האתר
האתר css-guide נוצר בשנת 2008 ונותן לכם מדריכי css לקריאה בחינם. בעזרת מדריכי האתר css-guide תוכלו ללמוד ולשפר את יכולתכם בשפה css שנועדה על מנת לעצב דפי אינטרנט בצורה טובה. גלישה נעימה, ולימוד css נעים.
חברת NSL המתמחה בתחום קידום אתרים
