استفاده از transition بدون :hover

مرداد ۱۱, ۱۳۹۲ توسط : حمید تدینی

pseudo classes

ایجاد transition برای زمانی که ماوس روی یک شئ قرار میگیرد یک امر تقریبا عادی در طراحی وب ما طراحان و برنامه نویسان وب شده است که با استفاده از شبه کلاس hover: انجام می شود . اما باید توجه داشت که این کد را می توان در بسیاری از شبه کلاس های دیگر نیز استفاده کرد …
در این نمونه کد یک گذار معولی را برای تغییر رنگ یک لینک مشاهده می کنید :

a, a:link, a:visited {
color: lightblue;
-webkit-transition: color .4s linear;
-moz-transition: color .4s linear;
-o-transition: color .4s linear;
-ms-transition: color .4s linear;
transition: color .4s linear;
}

a:hover {
color: white;
}

این قطعه کد باعث خواهد شد تا وقتی روی لینک ها قرار میگیریم رنگ آنها به آرامی تغییر کند .…

ادامه مطلب...