• اطلاعیه ها

    • Masih

      برخوردی شدید با تاپیک های تبلیغاتی   شنبه, 12 آبان 1397

      درود، از این لحظه به بعد، تمامی تاپیک های تبلیغاتی سبک رپرتاژ که با هدف جمع آوری بک لینک در انجمن های بیست اسکریپت ایجاد می شوند، حذف شده و دسترسی کاربر خاطی نیز مسدود خواهد شد.
haskey

نمایش کاور محصول

6 ارسال در این موضوع قرار دارد

سلام

خسته نباشید دوستان

من میخام بخش نمایش کاور محصول مشابه وبسایت راستچین و یا ژاکت باشه

که با آوردن موس بر روی محصول کاور اون محصول و بعضی اطلاعاتش نمایش داده بشه

مشابه :

 

کد و یا هر چیز دیگه ای هست ؟ لطفا بگید

ممنون

 

لطفا برای مشاهده attachment وارد سایت شوید و یا ثبت نام کنید.

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

درود.

اگه بتونید کدنویسی بخشی که با هاور به نمایش درمیاد رو انجام بدید، کار راحت میشه براتون. یعنی اول میایید یک بخش مجزا در یک DIV مخصوص طراحی می کنید که اطلاعات اضافه محصولات رو دریافت کنه، بعد اون DIV  رو با display:none مخفی می کنید. در نهایت از ویژگی hover در CSS استفاده می کنید تا بتونید بخش طراحی شده با هاور نمایش داده بشه.

این مورد رو نمیشه به صورت یک کد آماده خدمتتون ارائه کرد، نیاز هست تا متناسب با قالبتون کار بشه.

 

برای شروع اول یک DIV بسازید و از توابع نمایش اطلاعات در اون استفاده کنید. مثال:

لطفا برای مشاهده code وارد سایت شوید و یا ثبت نام کنید.

این کد رو باید داخل حلقه نمایش محصولات در صفحه اصلی یا هر مکانی که قصد دارید با هاور شدن نمایش داده بشه استفاده کنید. ترجیحا بعد از کد مربوط به آیکن کوچک محصول قرار داده بشه.

 

حالا باید خاصیت زیر رو به کلس مربوط به آیکن کوچک پست (تصویر شاخص کوچک) اختصاص بدید: (کد CSS)

لطفا برای مشاهده code وارد سایت شوید و یا ثبت نام کنید.

 

بعد با استفاده از چند دستور دیگه در CSS این باکس جدید رو مخفی می کنیم و موقعیت مکانیش رو تنظیم می کنید و کاری می کنیم که با هاور شدن به نمایش دربیاد. در کد زیر بجای کلس post-img باید کلس مربوط به تصاویر شاخص کوچک قالبتون رو جایگزین کنید تا عملیات هاور شدن به خوبی انجام بشه:

لطفا برای مشاهده code وارد سایت شوید و یا ثبت نام کنید.

الان باکس شما آمادست که با هاور شدن نمایش داده بشه. مابقی استایل ها شامل : اندازه تصویر شاخص، اندازه متن ها، رنگ پس زمینه باکس و... رو خودتون انجام بدید.

 

این روش کلی کار ما بود.

پسند شده توسط 1 کاربر

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

خیلی ممنون اقای دیندار

من از 

لطفا برای مشاهده code وارد سایت شوید و یا ثبت نام کنید.

برای hover  و حالت معمولی این باکسی که گفتم استفاده کردم

مشکلی که هست اینه که

موقع hover  شدن اون باکس کاوری که عرض کردم یه قسمتیش نمایش داده میشه بقیه قسمت ها نمایش داده نمیشه:

عکس ضمیمه شد

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

فقط اون قسمت که با فلش مشخص شده نمایش داده میشه

قسمت دوم هم طول و عرض مشخص شده هست که نمایش داده نمیشه

از z-index  هم استفاده کردم اما به همین منوال نمایش داده میشه

راه حلی وجود داره؟

لطفا برای مشاهده attachment وارد سایت شوید و یا ثبت نام کنید.

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

درود مجدد.

به نظر میرسه که DIV جدید به صورت کاور شده نمایش داده میشه.

بجای visibility از display:none و display:block استفاده کنید بهتره.

خاصیت z-index رو هم به DIV اصلی که آیکن های پست ها داخلش قرار داره بدید و هم به باکسی که با هاور شدن نمایش داده میشه. برای DIV اصلی مقدار z-index رو عدد 5 و برای باکسی که با هاور نمایش داده میشه مقدار 9999 رو تعیین کنید.

امکان داره z-index که برای باکس هاور تعیین کردید، مقدار کمتری نسبت به z-index تعریف شده برای اون DIV اصلی داشته باشه و به همین دلیل اون باکس مخفی میشه.

البته مشکل میتونه از قسمت های دیگه ی استایل باشه ، بهتره آدرس سایت رو بدید تا دقیق تر بررسی کنم

پسند شده توسط 1 کاربر

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

ارسال شده در (ویرایش شده)

روی لوکال اجراش کردم

من به باکس نمایش دهنده overflow:hidden  دادم(باکسی که محصولات نمایش داده میشه )

برای همین موقع hover  اینجوری نمایش داده میشه

حالا بدون اینکه بخام overflow  ها رو تغییر بدم و height بدم به اون باکس راهی نیست روی همون باکس نمایش داده بشه؟

z-index  ها رو هم تغییر دادم اما بازم بخ همون صورت نمایش داده میشه

ممنون

 

ویرایش شده در توسط haskey

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

متاسفانه همونطور که گفتم چند استایل دیگه وابسته به این قسمت از قالب، روی هم تاثیرگذار هستند که چنین مشکلی پیش اومده. بصورت تئوری و حدس و گمان کار سخته که بشه راه حل دقیق داد. اگه می تونستید روی هاست آنلاین نصبش کنید، سریعا میشه مشکل رو پیدا کرد.

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

برای ارسال دیدگاه یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

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

ایجاد یک حساب کاربری

برای حساب کاربری جدید در سایت ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری

  • چه کسانی در حال بازدید هستند؟   0 کاربر

    هیچ کاربر عضوی،در حال مشاهده این صفحه نیست.