تغییر رنگ پس زمینه و اندازه عرض یک عنصر div، با اشاره موس و به صورت تدریجی (به شکل انیمیشن)، با استفاده از انتقال (transition)، با شبه کلاس :hover و مشخصه های transition-property و transition-duration و background-color و width ، در CSS

در این مبحث قصد داریم که یک عنصر div تعریف کنیم که پس زمینه آن، رنگی باشد، به گونه ای که وقتی کاربر موس خود را بر روی آن می برد، عرض عنصر div افزایش یابد و همچنین رنگ پس زمینه آن، تغییر کند و این افزایش، به صورت تدریجی و مشابه انیمیشن باشد. نتیجه نهایی به صورت زیر می باشد (موس خود را بر روی قسمت رنگی ببرید) :

نتیجه :

برای این منظور، کدهای صفحه را به صورت زیر می نویسیم :

همان طور که مشاهده می کنید، درون تگ body از صفحه HTML ، یک عنصر div ساخته ایم. کدهای CSS ، درون زوج تگ style نوشته شده اند.

به این بخش از کدهای CSS توجه کنید :

همان طور که مشاهده می کنید، برای عنصر div ، پنج مشخصه تعریف کرده ایم. مشخصه width ، برای تعیین عرض عنصر div ، مشخصه height ، برای تعیین ارتفاع عنصر div و مشخصه background-color ، برای تعیین رنگ پس زمینه عنصر div می باشد (برابر رنگ قرمز). مشخصه transition-property در CSS ، برای اعمال تغییرات مورد نظرمان، به صورت تدریجی می باشد. همچنین دقت داشته باشید که مشخصه transition-property را به صورت زیر تعریف کرده ایم :

با این خط از کدهای CSS ، تعیین کرده ایم که تغییرات تدریجی، تنها باید برای مشخصه های background-color و width اعمال شود.

مشخصه transition-duration ، تعیین می کند که تغییرات تدریجی، در چه مدت زمانی، اعمال شوند، مثلا ما در این کدها، زمان 4 ثانیه را در نظر گرفته ایم.

ادامه کدهای CSS ، به صورت زیر می باشد :

عبارت div:hover به این معنی است که مشخصه هایی که تعیین می کنیم، زمانی به عنصر div اعمال شوند که کاربر، موس خود را بر روی آن برده باشد. مشخصه background-color را برابر blue (آبی) در نظر گرفته ایم که باعث می شود وقتی کاربر موس خود را بر روی عنصر div می برد، رنگ پس زمینه آن، به صورت تدریجی، به رنگ آبی تغییر پیدا کند و مشخصه width را هم برابر 10em تعیین کرده ایم که چون مقدار آن، با مقدار حالت عادی که مشخص کرده ایم، متفاوت است، بنابراین وقتی کاربر موس را بر روی عنصر div می برد، اندازه عرض آن، به تدریج افزایش می یابد.