تغییر رنگ پس زمینه (Background) عنصرها، وقتی موس را بر روی عنصر می بریم، با کلاس های (Class) به شکل کلی w3-hover-color ، در W3.CSS
در کلید شماره 26146 ، در مورد رنگ ها (Color) در W3.CSS صحبت کردیم. با فرض دانستن مقدمات مربوط به آن کلید آموزشی، اکنون قصد داریم آموزش بدهیم که در صورت دانستن نام رنگ (Color) مورد نظرتان، چگونه آن را برای تغییر رنگ پس زمینه (Background) عنصرها (در هنگام بردن موس بر روی آنها) به کار ببرید.
برای این منظور، شکل کلی کلاس (Class) مورد نیاز که باید برای عنصر مورد نظرمان در صفحه HTML ذکر شود، به صورت زیر می باشد :
که در آن، باید به جای کلمه color ، نام رنگ مورد نظر خود را بنویسید (البته با حروف کوچک).
بنابراین در کلاس های (Class) مربوط به تغییر رنگ پس زمینه (Background) عنصرها (در هنگام بردن موس بر روی آنها)، ابتدا عبارت w3-hover- نوشته می شود و سپس نام مربوط به رنگ، ذکر خواهد شد. مثل کلاس های زیر :
این کلاس ها (Class)، باعث می شوند که وقتی موس بر روی عنصر قرار گرفت، آنگاه رنگ پس زمینه عنصر، تغییر کند. به عنوان مثال، کلاس w3-hover-green ، باعث می شود که وقتی موس را بر روی عنصر ببریم، رنگ پس زمینه عنصر به رنگ سبز (green) تبدیل شود.
این کلاس ها (Class)، تنها رنگ پس زمینه را تغییر نمی دهند، بلکه رنگ متن نمایش داده شده در عنصر را نیز مشخص می کنند که بر اساس اینکه رنگ روشن باشد یا رنگ تیره، یکی از دو رنگ سیاه (black) یا سفید (white) را برای متن درون عنصر تعیین می کنند.
به مثال زیر توجه کنید :
بخش مهم کدها :
کد کامل صفحه HTML :
نتیجه :
پس زمینه عنصر به رنگ سبز (green) می باشد، اما اگر موس را بر روی آن ببرید، رنگ پس زمینه به قرمز (red) تغییر می کند :
در این مثال، فهرست رنگ های استاندارد تعریف شده در چارچوب W3.CSS را در کنار هم و با رنگی کردن پس زمینه تعدادی عنصر div نمایش می دهیم. سپس تعیین می کنیم که اگر موس بر روی هر یک از آنها برده شود، رنگ دیگری در پس زمینه آن نمایش داده شود. شیوه تغییر رنگ پس زمینه را هم با عبارت هایی مثل عبارت زیر در عنصرها نمایش داده ایم :
منظورمان از عبارت بالا این است که عنصر در حالت عادی دارای رنگ پس زمینه نارنجی (Orange) است و چنانچه موس را بر روی آن ببریم، رنگ پس زمینه آن به قهوه ای (Brown) تغییر می کند.
بخش مهم کدها :
کد کامل صفحه HTML :
نتیجه :
