رفتن به مطلب

بالا رفتن یک قسمت وقتی موس میاد روش


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

سلام و درود

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

البته یکم باید بیارمش پایین تر(نسبت به عکس)

یا در جاهای دیگه به سمت چپ یا راست حرکت کنه

اگر راه حل سی اس اسی هست بگید...

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

خواهشا کامل توضیح بدید

پیشاپیش از کمکتون ممنون

13756983911.png

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

با استفاده از CSS میشه اینکار کرد این الان دقیق کجاست ؟ منو های بالای سایته یا نه یک جای دیگه؟

لینک به ارسال

سلام و درود

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

البته یکم باید بیارمش پایین تر(نسبت به عکس)

یا در جاهای دیگه به سمت چپ یا راست حرکت کنه

اگر راه حل سی اس اسی هست بگید...

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

خواهشا کامل توضیح بدید

پیشاپیش از کمکتون ممنون

13756983911.png

این موردی که شما بیان کردید مرتبط با بادس پرس نیست و باید در بخش مربوطه تاپیک می زدید

لینک به ارسال

این برای چپ و راست بردنه با سی اس اس هنگام هاور،


transition-timing-function: ease;
transition-timing-function: ease, linear;
transition-timing-function: cubic-bezier(0.6, 0.1, 0.15, 0.8);

نمشه حالا چپ و راست بره؟؟ :D

لینک به ارسال

از این کد ها در فایل استایل قالب استفاده کنید :

وقتی که موس روش میره چه شکلی بشه :


.classname:hover{
style
}

برای بالا رفتن :


padding-bottom:10px;

یا


margin-bottom:10px;

برای رفتن به چپ :


margin-right:10px;

برای زیبایی کار بهتر است در اخر هر استایل کد زیر رو اضافه کنید . ( چه معمولی و چه هاور ) :


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

اگر ادرس انلاین رو بدید بهتر میتونم کد رو بهتون بدم

لینک به ارسال

یعنی واقعا کسی نبود که این تاپیک ر گزارش بده تا منتقل کنیم؟!

کسی میتونه ربطش با بادی پرس رو بگه؟

منتقل شد

لینک به ارسال

از این کد ها در فایل استایل قالب استفاده کنید :

وقتی که موس روش میره چه شکلی بشه :


.classname:hover{
style
}

برای بالا رفتن :


padding-bottom:10px;

یا


margin-bottom:10px;

برای رفتن به چپ :


margin-right:10px;

برای زیبایی کار بهتر است در اخر هر استایل کد زیر رو اضافه کنید . ( چه معمولی و چه هاور ) :


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

اگر ادرس انلاین رو بدید بهتر میتونم کد رو بهتون بدم

دوست عزیز این مواردی که گفتید رو قبلا تست کرده بودم جواب نداد

آیا روش دیگه ای هم هست؟؟

لینک به ارسال

دوستان فراموش کردن فکر کنم

شما حتما باید این کد رو هم قرار بدید :

position:relative;

یعنی اینجوری میشه :


.کلاس مورد نظر:hover {
top:-10px;
position:relative;
}

لینک به ارسال

دوست عزیز خیلیییی ممنون انجام شد

حالا میخوام سرعت بالا پایین رفتنشو کم کنم باید چیکار کنم؟

لینک به ارسال

این فقط روی سرعت تعویض رنگ تاثیر میزاره

کدهای استایل من:


#text a:hover{
text-decoration:none;
color:#FFF;
top:-10px;
position:relative;
-moz-transition:0.5s;/*Moz*/
-webkit-transition:0.5s;/*Webkit*/
-ms-transition:0.5s;/*Ms*/
-o-transition:0.5s;/*O*/
padding:3px 3px 3px 3px;
transition:0.8s;

میخوام سرعت حرکتش رو کم کنم

و دیگر این که بالا پایین رفتنش روی بقیه موارد تاثیر نزاره(یه خورده اونا رو هم به حرکت در میاره)

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

تغییر در هر بخش اعم از رنگ و سرعت با تغییر transitionباید عوض بشه

البته شما مقدار top رو هم کم و زیاد کنید این سرعت تغییر میکنه

لینک به ارسال

دوست عزیز من مقدار top رو کم منم خب طبیعتا کمتر بالا میره

من نمیخوام اینجوری بشه

من کدی استایلمو اون بالا زدم اگه میشه بفرمایید کدوم یکی از اون transition رو تغییر بدم تا این اتفاق رخ بده

یا اینکه اصلا نیاز به یکی دیگه از transition ها داره؟

در ضمن به این سوال هم که بالا مطرح کرده بودم پاسخ بدید

"و دیگر این که بالا پایین رفتنش روی بقیه موارد تاثیر نزاره(یه خورده اونا رو هم به حرکت در میاره)"

ممنون

لینک به ارسال

بنظرم خیلی غیر عادی هست که که top را منفی دادند :)

اینطوری قرار بدید بهتره


position:relative;
bottom:10px;

و این که دوست عزیز برای این که بقیه تکون نخورند استایل اصلی را هم به این صورت در بیارید


position:relative;
bottom:0px;

برای کم و زیاد کردن سرعت هم مقدار transition را زیاد کنید

کد پایانی این میشه


#text a {
position: relative;
bottom: 0px;
}
#text a:hover {
position: relative;
bottom: 10px;
text-decoration: none;
color: #FFF;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
padding: 3px;
}

باید متذکر بشم که بیشتر مواقع کد های margin و padding برای تگ a تاثیر نداره برای همین برای شما عمل نمی کرده می تونیستید به صورت span استفاده کنید

و این که این کدی که دادم سرعت 1 ثانیه داره می توانید تغییر بدید و بهتره از ease-in-out استفاده کنید هم شامل رفت و برگشت میشه هم ظاهر کار را زیبا می کنه

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

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...