آموزش طراحی وب

مدرسه مجازی ایرانیان

دسته بندی موضوعات
سفارش تبلیغات

رویداد hover در جی کوئری

computer_mouse

فصل سوم : event ها در جی کوئری

جلسه هفتم : رویداد hover در جی کوئری

سلام به همراهان همیشگی مدرسه مجازی ایرانیان

در این جلسه در رابطه با رویداد hover صحبت می کنیم و همراه با مثال منو و زیر منو و دموی آنلاین این رویداد رو به شما دوستان آموزش میدم.

 

رویداد hover

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

به عبارتی میتونید بگید زمانی که موس روی عنصر رفت یه اتفاق بیوفته و زمانی که موس از روی عنصر برداشته شد یه اتفاق دیگه بیوفته . یعنی دو حالت رو تعریف کنید .

دستور کلی این رویداد :

Selector : عنصر و یا انتخابگر شما محسوب میشه .

FirstFunction : تابع ورودی و اولیه شما محسوب میشه ، زمانی که موس روی عنصر میره و رویداد mouseenter اتفاق میوفته.

SecondFunction : تابع دوم و خروجی شما محسوب میشه ، زمانی که موس از روی عنصر برداشته میشه و رویداد mouseleave اتفاق میوفته .

 

خوب حالا با ذکر مثال این رویداد رو براتون واضح توضیح میدم . تصور کنید ما یک منو داریم که قراره با قرار گرفتن موس روی منو یک زیر منو باز بشه و زمانی که موس از روی منو برداشته شد ، زیر منو حذف بشه یا به عبارتی پنهان بشه. ابتدا به شکل زیر html این مثال رو پیاده می کنیم :

خوب ما یه گزینه داریم که تو عنصر span قرار دادیم و یک زیر منو داریم که با کلاس children اون رو مشخص کردیم. حالا باید با css زیر منو رو پنهان کنیم تا با جی کوئری و رویداد hover اون رو نمایان کنیم.

خوب با استایل بالا هم زیباترش کردیم هم زیر منو رو مخفی کردیم. حالا با جی کوئری تعریف می کنیم که زمانی که موس روی ” منوی اصلی ” قرار گرفت زیر منو باز بشه و زمانی که موس برداشته شد زیر منو بسته بشه .

در این مثال گفتیم با قرار گرفتن موس روی span عنصر children با رویداد slideDown بصورت کشویی باز بشه و زمانی که موس از روی span برداشته شد، عنصر children با رویداد slideUp بصورت کشویی بسته بشه .

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

میتونید این مثال رو بصورت آنلاین هم مشاهده کنید . امیدوارم که براتون مفید بوده باشه.

 

موفق و پاینده باشید .

تهیه شده در مدرسه مجازی ایرانیان

دموی آنلاین

<<

>>

اگر این آموزش برای شما مفید بود با دوستان خود به اشتراک بگذارید



سفارش تبلیغات

گردآوری و تالیف : میترا رحیمی

بنیانگذار و نوسنده در مدرسه مجازی ایرانیان و سردبیر ماهنامه طراحی وب همچنین مدرس و مسلط به برنامه نویسی سمت سرور با PHP MVC و برنامه نویسی سمت کلاینت با html 5 , css3 , jquery , مبانی سئو و سیستم مدیریت محتوای وردپرس

خوراک خوشمزه و علمی روزانه
با وارد کردن ایمیلتون در فیلد روبرو آموزش های جذاب و vip دریافت نمایید

آموزش های مرتبط با این مطلب

دیدگاه های مخاطبین

لطفا تنها دیدگاه خود را در رابطه با این مطلب ارسال نمایید، سوالات را از طریق سامانه پرسش و پاسخ مطرح نمایید. سوالات در دیدگاه ها تایید نخواهد شد.

  • مهران

    با سلام
    با تشکر از مطالب فوق حرفه ای شما
    لطفا مطالب جو کوئری را بیشتر بزارید
    اگر می شود هم Php هم بزارید
    بخاطر وب سایت پویا شما ممنونم

  • امیرحسام

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

  • علی کنکوری

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

  • morteza

    اپدیت نمیشید؟

    • میترا رحیمی

      سلام دوست عزیز
      چرا؟ بعد از این مطلب برای این بخش ما ۳ تا مطلب ارسال کردیم شاید مرورگرتون کش داره .

  • سیاوش عاملی

    سلام خیلی ممنون از آموزش های خوبتون ….
    ۲ تا سوال داشتم یک اینکه بع تعدادی که ما روی گزینه “منوی اصلی ” هاور کنیم زیر منون ها بازو بسته می شه که این خیلی بده … با:
    return false;
    یا همچین چیز هایی میشه بستش ؟؟ یه همون نگهشداشت ؟؟
    و دوم این که این افکت پاک شدن placeholder ها به چه نحوی هست. پلاگین هست یا کد ؟؟؟

    • میترا رحیمی

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

  • محمود ولی زاده

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

  • رامین

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

    • حسین همت یار

      سلام ، سوالات فقط در بخش پرسش و پاسخ جواب داده خواهد شد . تشکر

وبلاگ مدرسه

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

مدرسین مدرسه

  • حسین همت یار

    حسین همت یار

    مدرس ، طراح رابط کاربری وب و موبایل با 8 سال سابقه ی فعالیت حرفه ای

سوابق کامل

آخرین پرسش و پاسخ ها

آخرین پرسش و پاسخ ها
شما هم سوالی دارید ؟