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