تغییر رنگ پس زمینه یک عنصر div ، با اشاره موس و به صورت سریع، با شبه کلاس :hover و مشخصه background-color ، در CSS

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

نتیجه :

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

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

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

همان طور که مشاهده می کنید، برای عنصر div ، سه مشخصه تعریف کرده ایم. مشخصه width ، برای تعیین عرض عنصر div ، مشخصه height ، برای تعیین ارتفاع عنصر div و مشخصه background-color ، برای تعیین رنگ پس زمینه عنصر div می باشد (برابر رنگ قرمز).

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

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