تغییر ظاهر و رنگ نوشته و متن وقتی با موس بر روی آن می رویم

a--m--j · Feb 20, 2013

یه سری سایت ها هستند که در نگاه اول نوشته هاشون کم رنگ هستند و با رفتن موس بر روی نوشته اونها پررنگ تر میشن و یا کلا تغییر رنگ میدن ... چطوری با استفاده از Css باید این کار رو انجام داد
من میخواستم بر روی content قالب این عمل رو پیاده کنم

HTML:

کد قالب
#content {    margin-bottom: 20px;    color: #FFF;    background-color: #0F0;}

کد اضافه شده توسط من

HTML:

#content hover{color:#fff}

تقریبا این کد ها رو نوشتم و البته به صفحات html قالب کدی اضافه نکردم به عبارتی dive ایدیه contact فقط به فایل html قالب اضافه شده ولی اتفاقی نیفتاد
ایراد کار من کجا می تونه باشه

jeyson · Feb 20, 2013

شما دو اشتباه مرتکب شده اید!
اولا رنگ نوشته در ابتدا سفید است ( fff# ) سپس بعد از اینکه موس روی آن می رود دوباره سفید میشود!! خب این تغییرات محسوس نیست؟؟
دوما در قسمت هاور فراموش کرده اید دو نقطه را قرار دهید! پس اصلاح می کنیم
کد به صورت زیر اصلاح می شود و ما در ابتدا رنگ آبجکت را مشکی قرار می دهیم به این صورت :
HTML Code:

[HTMLS].content { margin-bottom: 20px;
color: #000;
background-color: #0F0;
}[/HTMLS]

سپس بخش دوم را اصلاح می کنیم و اولا رنگ را سفید می گذاریم ، دوما اون دو نقطه که فراموش کردید بعد از کانتنت بذارید رو قرار میدیم به صورت زیر

HTML:

.content:hover{    color:#fff;    }

و این هم کد کامل

HTML:

<!doctype html><html><head><meta charset="utf-8"><title>Untitled Document</title><style>.content {    margin-bottom: 20px;    color: #000;    background-color: #0F0;    }
.content:hover{    color:#fff;    }
</style></head>
<body><div class="content"><p class="content">reza</p></div></body></html>