PDA

View Full Version : مبتدی: تغییر رنگ متن لینک هنگام قرار گرفتن موس بر روی آن



Masoome_das
یک شنبه 31 مرداد 1389, 13:29 عصر
چطوری می تونم یک لینک بسازم که وقتی موس روی آن قرار می گیرد متن مربوط به لینک تغییر رنگ بده:عصبانی++:

mahdigolzari
یک شنبه 31 مرداد 1389, 13:37 عصر
این کار رو با css باید انجام بدی
به لینکت یه کلاس بده، بعد تو بخش استایل براش کد css بنویس




<style type="css/style">
.link
{
font:normal 12px tahoma;
color:#FF0000;
}
.link:hover
{
color:#000;
}
</style>

<a class="link"></a>

Masoome_das
یک شنبه 31 مرداد 1389, 13:57 عصر
این کار رو با css باید انجام بدی
به لینکت یه کلاس بده، بعد تو بخش استایل براش کد css بنویس

ببخشید من این کد را امتحان کردم ولی جواب نگرفتم می شه شما یک فایل Html ساده ازش بدهید.

mahdigolzari
یک شنبه 31 مرداد 1389, 14:16 عصر
ببخشید من این کد را امتحان کردم ولی جواب نگرفتم می شه شما یک فایل Html ساده ازش بدهید.

این یک نمونه ساده است

zoha.abadi
پنج شنبه 13 مهر 1396, 00:13 صبح
سلام میخواستم بپرسم برای تغییر رنگ عکس بصورت آهسته هنگام رفتن موس روی آن باید چکار کرد؟

DH2471
دوشنبه 17 مهر 1396, 22:04 عصر
سلام میخواستم بپرسم برای تغییر رنگ عکس بصورت آهسته هنگام رفتن موس روی آن باید چکار کرد؟

سلام.
برای اینکار میتونید از ویژگی Transition در CSS3 استفاده کنید.
فرض میکنیم که تصویر مورد نظر دارای کلاس .image هست بنابراین در فایل css مینویسیم:

.image {
...
background-color: blue;
transition: background-color 2s ease 1s;
...
}

.image:hover {
background-color: green;
}

ویژگی Transition چهار داده رو قبول میکنه که به ترتیب توضیح میدم.
اولین داده ویژگی که میخواهید Transition روش اعمال بشه رو مشخص میکنه. برای اعمال ویژگی روی همه موارد میتونید از کلمه all استفاده کنید.
دومین عدد مدت زمان انیمیشن رو تعیین میکنه. s به معنای ثانیه است (مثال: 5s یعنی 5 ثانیه). به جای آن از ms هم میتونید استفاده کنید به معنی میلی ثانیه (مثال: 500ms یعنی نیم ثانیه)
سومین مقدار نحوه نمایش انیمیشن رو تعیین میکنه که چند حالت داره:
ease : انیمیشن به آرامی شروع، سرعت پیدا میکنه و به آرامی تموم میشه.
linear : با سرعت یکنواخت انیمیشن اجرا میشه.
ease-in : شروع انیمیشن آهسته خواهد بود.
ease-out : خاتمه انیمشین آهسته خواهد بود.
ease-in-out : ابتدا و انتهای انیمشین آهسته خواهد بود.
cubic-bezier(x,x,x,x) : نحوه اجرای انیمیشن رو میتونید سفارشی تعیین کنید.

موفق باشید.