رفتن به مطلب

مشکل در رفت و برگشت حالت با تگ transition


پست های پیشنهاد شده

سلام

این تاپیک موضوع سختی نیست ولی خوب من باهاش به مشکل بر خوردم :)

من از این کد ها استفاده کردم که وقتی موس میره روش یه اتفاقاتی میوفته ولی وقتی موس از روش برداشته میشه یهو مپره که نمیدونم چرا

میخوام به همون حالت و سرعت به پایان برسه

باید چیکار کنم؟

کد ها:


-moz-transition:0.7s;/*Moz*/
-webkit-transition:0.7s;/*Webkit*/
-ms-transition:0.7s;/*Ms*/
-o-transition:0.7s;/*O*/

ویرایش شده توسط shayan
لینک به ارسال

به hover کلاس مورد نظرتون اضافه کنید:

-moz-transition:0.7s;/*Moz*/
-webkit-transition:0.7s;/*Webkit*/
-ms-transition:0.7s;/*Ms*/
-o-transition:0.7s;/*O*/

  • امتیاز 1
لینک به ارسال

دوست عزیز تو قسمت هاور استفاده شده

ولی وقتی موس از روش برداشته میشه یهو مپره

میخوام به همون حالت و سرعت به پایان برسه

لینک به ارسال

دوست عزیز تو قسمت هاور استفاده شده

ولی وقتی موس از روش برداشته میشه یهو مپره

میخوام به همون حالت و سرعت به پایان برسه

پس به خود کلاس اضافه نمایید.

  • امتیاز 1
لینک به ارسال

برادر من مشکل من کلاس و اینجور چیزا نیست

مشکل کدیه که گذاشتم

که میخوام جوری بشه که در صورت برداشتن موس از روی عنصر مورد نظر یک دفعه به حالت اول بر نگرده با همون سرعتی که تغییر کرد برگرده به حالت اول

ویرایش شده توسط shayan
لینک به ارسال

برادر من مشکل من کلاس و اینجور چیزا نیست

مشکل کدیه که گذاشتم

که میخوام جوری بشه که در صورت برداشتن موس از روی عنصر مورد نظر یک دفعه به حالت اول بر نگرده با همون سرعتی که تغییر کرد برگرده به حالت اول

کد را از hovber بردارید و بگذارید داخل کلاس مورد نظر درست می شه

همینطور می تونید برای hover اعدادی متفاوت بگذارید که زمان رفت و برگشت تفاوت کنه

  • امتیاز 1
لینک به ارسال

کل کد های استایل عنصر مورد نظر:


.menu-right {
direction:rtl;
float:right;
padding-right:295px;
margin-top:-400px;
font-family:"EntezareZohoor 1 **";
font-size:20px;
color:#999999;
line-height:45px;
list-style:circle;
text-shadow:4px 5px 7px #666;
}
.menu-left {
direction:ltr;
float:left;
margin-top:-400px;
padding-left:300px;
font-family:"EntezareZohoor 1 **";
font-size:20px;
color:#999999;
line-height:45px;
list-style:circle;
text-shadow: 4px 5px 7px #666;

}
li a:link {
text-decoration:none;
color:#f18800;
}
li a:visited {
color:#f18800;
}
li a:hover {
color:#FFF;
-moz-transition:0.7s;/*Moz*/
-webkit-transition:0.7s;/*Webkit*/
-ms-transition:0.7s;/*Ms*/
-o-transition:0.7s;/*O*/
font-size:28px;
opacity:0.6;
}
.menu-right li {
padding:3px 3px 3px 3px;
margin-top:10px;
}
.menu-left li {
padding:3px 3px 3px 3px;
margin-top:10px;
}
.menu-left li :hover {
background-color:#3acaf9;
border:solid #000 1px;
border-top-right-radius:8px;
border-bottom-left-radius:8px;
padding:3px 5px 3px 5px;
}
.menu-right li :hover {
background-color:#3acaf9;
border:solid #000 1px;
border-top-right-radius:8px;
border-bottom-left-radius:8px;
padding:3px 5px 3px 5px;
}

کجاش رو باید تغییر بدم؟؟

لینک به ارسال


li a {
-moz-transition: all .7s linear .2s;
-o-transition:all .7s linear .2s;
-webkit-transition: all .7s linear .2s;
transition: all .7s linear .2s;
}
li a:link {
text-decoration:none;
color:#f18800;
}
li a:visited {
color:#f18800;
}
li a:hover {
color:#FFF;
font-size:28px;
opacity:0.6;
}

http://jsfiddle.net/uSxuL/#run

  • امتیاز 1
لینک به ارسال

لطفا برای ارسال دیدگاه وارد شوید

شما بعد از اینکه وارد حساب کاربری خود شدید می توانید دیدگاهی ارسال کنید



ورود به حساب کاربری
×
×
  • اضافه کردن...