addClass

removeClass

chining

Event.currentTarget

ארועי מקלדת

שיעורי בית

בנו אתר שנראה כך

במעבר עכבר על תמונת פרח מוצג תפריט של שתי אפשרויות – קרא עוד והצג בגדול

לכל פרח יש class או id יחודי שהארועים יקרו בתגובה לכניסת עכבר לשטחם mouseenter

ניתן לגשת לאלמנטים שצריכים להופיע על ידי כתיבת סלקטור מקונן

במעבר עכבר על כל אחד משני הקישורים הללו הרקע שלו משתנה לאפור והטקסט לאדום ונטוי

עשו זאת תוך שימוש ב class בשם active

הערה:

אין צורך להשתמש ב event.currentTarget. ניתן להגיב לכניסת עכבר לאלמנט שיש לו את הclass בשם  read-more (גםאם כל האלמנטים שיש להם את הclass הזה יקבלו class בשם active זה לא יפריע לגולש)

שמנה לב – ישנו דיב ובו שני הקישורים. הדיב ממוקם באופן יחסי לתמונת הפרח. כברירת מחדל (ב CSS) הוא מוסתר ורק בתגובה למעבר עכבר על הפרח הוא מוצג.

מבנה HTML ללא JQUERY

http://gamani.info/prog/JS/lesson8/lessIsMore/less_is_more.html

ולהורדה

http://gamani.info/prog/JS/lesson8/lessIsMore-htmlcss.zip

חזרה לעמוד הקורס