دوستان کسی هست به من کمک کنه
من یک سایت با برنامه فروند پیج برای خودم درست کردم و می خواهم وقتی موس روی بعضی از کلمه ها می رود رنگ آن کلمه ها تغییر کند
مثل قسمت بالای همین سایت قسمتی که نوشته " پیام های شخصی " وقتی که روی آن با موس می رویم تغییر رنگ می دهد
سلام
بهترین راه استفاده از Css است.
شما ابتدا مشخص کنید که:
1-روی تمام لینک های صفحه ، باید تعریف خاص شود،
کد:
<style type="text/css">
a:Link{} // برای نمایش عادی لینک
a:hover{} // برای هنگام حضور موس
a:visited{} // برای هنگام کلیک کردن
</style>
روی همه لیک ها اعمال می شود.
2-می خواهید بر روی دسته از لینک ها این عمل اتفاق بیفتد ، باید کلاس تعریف شود،
کد:
<style type="text/css">
a.ClassName:Link{} // برای نمایش عادی لینک
a.ClassName:hover{} // برای هنگام حضور موس
a.ClassName:visited{} // برای هنگام کلیک کردن
</style>
<a class="ClassName">Link1</a>
<a class="ClassName">Link2</a>
<a class="ClassName">Link3</a>
<a class="ClassName">Link4</a>
3-روی لینکی خاص ، باید ID تعریف شود.
کد:
<style type="text/css">
a#NameID:Link{} // برای نمایش عادی لینک
a#NameID:hover{} // برای هنگام حضور موس
a#NameID:visited{} // برای هنگام کلیک کردن
</style>
<a Id="NameID">Link</a>
------------------------
» تکمیل شده
------------------------
می توان این ویژگی را نیز ترکیبی استفاده کرد، مثلا چند لینک عضو یک کلاس باشند و هر لینک خود دارای ID باشد ، ناگفته نماند که اولویت اجرا به ترتیب زیر می باشد:
1-ID
2-کلاس
3-کلی(شکل کلی تگ)
»» نکته : این اولویت زمانی کاربرد دارد که شما در سه حالت یک دستور متفاوت (مثلا:حضور موس یا ...) داشته باشید.
نمونه :
1- هنگام حضور همه لینک ها دارای پس زمینه قرمز شوند،
2- برای دسته لینک ها مثلا AA هنگام حضور موس پس زمینه را سبز می شود،
3- برای عضوی از دسته AA مثلا AAA هنگام حضور موس پس زمینه را سبز شود
کد:
<style type="text/css">
a:hover{background:'red'}
a.AA:hover{background:'green'}
a#AAA:hover{background:'blue'}
</style>
<a>I Am Red!</a>
<a class="AA">I am member of class 'AA'</a>
<a class="AA" Id="AAA">I am member of class 'AA' & member of id 'AAA'</a>
این روش خیلی به کاهش کد، افزایش خوانایی ، بهبود کیفیت و ... کمک می کند.
ضمنا فراموش نکنید تگ Style را درون تگ Head قرار دهید.
موفق باشید.
