تغییر رنگ متن (text) درون عنصرها، وقتی موس را بر روی عنصر می بریم، با کلاس های (Class) به شکل کلی w3-hover-text-color ، در W3.CSS

در کلید شماره 26146 ، در مورد رنگ ها (Color) در W3.CSS صحبت کردیم. با فرض دانستن مقدمات مربوط به آن کلید آموزشی، اکنون قصد داریم آموزش بدهیم که در صورت دانستن نام رنگ (Color) مورد نظرتان، چگونه آن را برای تغییر رنگ متن (text) درون عنصرها (در هنگام بردن موس بر روی آنها) به کار ببرید.

برای این منظور، شکل کلی کلاس (Class) مورد نیاز که باید برای عنصر مورد نظرمان در صفحه HTML ذکر شود، به صورت زیر می باشد :

که در آن، باید به جای کلمه color ، نام رنگ مورد نظر خود را بنویسید (البته با حروف کوچک).

بنابراین در کلاس های (Class) مربوط به تغییر رنگ متن (text) درون عنصرها (هنگام بردن موس بر روی آنها)، ابتدا عبارت w3-hover-text- نوشته می شود و سپس نام مربوط به رنگ، ذکر خواهد شد. مثل کلاس های زیر :

این کلاس ها (Class)، باعث می شوند که وقتی موس را بر روی عنصر ببریم، رنگ متن (text) درون عنصر، تغییر کند. به عنوان مثال، کلاس w3-hover-text-yellow ، باعث می شود که وقتی موس را بر روی عنصر ببریم، رنگ متن (text) درون عنصر به رنگ زرد (yellow) تغییر کند.

به مثال زیر توجه کنید :

مثال

بخش مهم کدها :

کد کامل صفحه HTML :

نتیجه :

رنگ پیش فرض برای نمایش متن درون یک عنصر با پس زمینه نارنجی (orange)، برابر رنگ سیاه (black) است. حال اگر موس را بر روی عنصر ببریم، رنگ متن به سفید (white) تغییر می کند :

مثال

در این مثال، یک متن مشخص را با رنگ های مختلف نمایش می دهیم و همچنین تعیین می کنیم که اگر موس بر روی عنصر حاوی هر یک از متن ها برود، آنگاه رنگ نمایش متن درون آن عنصر، تغییر کند.

بخش مهم کدها :

<div class="w3-row">
    <div class="w3-third">
        <div class="w3-container w3-center w3-padding-16 w3-text-red w3-hover-text-light-gray"><h2>kelidestan.com - Red --> Light Gray</h2></div>
        <div class="w3-container w3-center w3-padding-16 w3-text-pink w3-hover-text-black"><h2>kelidestan.com - Pink --> Black</h2></div>
        <div class="w3-container w3-center w3-padding-16 w3-text-blue w3-hover-text-green"><h2>kelidestan.com - Blue --> Green</h2></div>
        <div class="w3-container w3-center w3-padding-16 w3-text-black w3-hover-text-yellow"><h2>kelidestan.com - Black --> Yellow</h2></div>
    </div>
    <div class="w3-third">
        <div class="w3-container w3-center w3-padding-16 w3-text-orange w3-hover-text-white"><h2>kelidestan.com - Orange --> White</h2></div>
        <div class="w3-container w3-center w3-padding-16 w3-text-cyan w3-hover-text-green"><h2>kelidestan.com - Cyan --> Green</h2></div>
        <div class="w3-container w3-center w3-padding-16 w3-text-purple w3-hover-text-red"><h2>kelidestan.com - Purple --> Red</h2></div>
        <div class="w3-container w3-center w3-padding-16 w3-text-gray w3-hover-text-blue"><h2>kelidestan.com - Gray --> Blue</h2></div>
    </div>
    <div class="w3-third">
        <div class="w3-container w3-center w3-padding-16 w3-text-yellow w3-hover-text-black"><h2>kelidestan.com - Yellow --> Black</h2></div>
        <div class="w3-container w3-center w3-padding-16 w3-text-lime w3-hover-text-blue"><h2>kelidestan.com - Lime --> Blue</h2></div>
        <div class="w3-container w3-center w3-padding-16 w3-text-khaki w3-hover-text-black"><h2>kelidestan.com - Khaki --> Black</h2></div>
        <div class="w3-container w3-center w3-padding-16 w3-text-light-gray w3-hover-text-red"><h2>kelidestan.com - Light Gray --> Red</h2></div>
    </div>
</div>

کد کامل صفحه HTML :

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="w3.css">
    </head>

<body>
        <div class="w3-row">
            <div class="w3-third">
                <div class="w3-container w3-center w3-padding-16 w3-text-red w3-hover-text-light-gray"><h2>kelidestan.com - Red --> Light Gray</h2></div>
                <div class="w3-container w3-center w3-padding-16 w3-text-pink w3-hover-text-black"><h2>kelidestan.com - Pink --> Black</h2></div>
                <div class="w3-container w3-center w3-padding-16 w3-text-blue w3-hover-text-green"><h2>kelidestan.com - Blue --> Green</h2></div>
                <div class="w3-container w3-center w3-padding-16 w3-text-black w3-hover-text-yellow"><h2>kelidestan.com - Black --> Yellow</h2></div>
            </div>
            <div class="w3-third">
                <div class="w3-container w3-center w3-padding-16 w3-text-orange w3-hover-text-white"><h2>kelidestan.com - Orange --> White</h2></div>
                <div class="w3-container w3-center w3-padding-16 w3-text-cyan w3-hover-text-green"><h2>kelidestan.com - Cyan --> Green</h2></div>
                <div class="w3-container w3-center w3-padding-16 w3-text-purple w3-hover-text-red"><h2>kelidestan.com - Purple --> Red</h2></div>
                <div class="w3-container w3-center w3-padding-16 w3-text-gray w3-hover-text-blue"><h2>kelidestan.com - Gray --> Blue</h2></div>
            </div>
            <div class="w3-third">
                <div class="w3-container w3-center w3-padding-16 w3-text-yellow w3-hover-text-black"><h2>kelidestan.com - Yellow --> Black</h2></div>
                <div class="w3-container w3-center w3-padding-16 w3-text-lime w3-hover-text-blue"><h2>kelidestan.com - Lime --> Blue</h2></div>
                <div class="w3-container w3-center w3-padding-16 w3-text-khaki w3-hover-text-black"><h2>kelidestan.com - Khaki --> Black</h2></div>
                <div class="w3-container w3-center w3-padding-16 w3-text-light-gray w3-hover-text-red"><h2>kelidestan.com - Light Gray --> Red</h2></div>
            </div>
        </div>
    </body>
</html>