کد CSS نمایش و مخفی کردن با آمدن موس

فهرست
    برای شروع تولید فهرست مطالب ، یک هدر اضافه کنید
    کد CSS نمایش و مخفی کردن با آمدن موس

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

    فرض کنید می‌خواهید با قرار گرفتن موس بر روی یک عنصر (مثلاً یک لینک) عنصر دیگری (مثلاً یک div) نمایان شود.

    برای این کار خیلی‌ها از جاوا اسکریپت (Javascript) استفاده می‌کنند. اما بد نیست بدانید که CSS این قابلیت را دارد که بدون استفاده از جاوااسکریپت، نیاز شما برآورده کند.

    این مسأله ممکن است به ۳ صورت پیش بیاید :

    ۱- عنصر دوم، فرزند عنصر اول باشد :

    این مورد، بیش از همه برای نمایش لیست‌های نامرتب که زیرمجموعه یک گزینه هستند کاربرد دارد. به طور مثال برای فعال کردن زیرمنوهای یک منوی مرور سایت.

    برای این کار، کافی‌ست به مثال زیر دقت کنید:

    کد CSS نمایش و مخفی کردن با آمدن موس

    خروجی این مثال را در اینجا ببینید:

    خروجی قسمت اول

    اگر موس را بر روی Item 1 ببرید، خواهید دید که زیرمجموعه آن ظاهر خواهد شد.

    به ساختار CSS در خط ۱۰ دقت کنید ، دستور میدهدیم :

     با قرار گرفتن موس روی عنصری با آی دی submenu-1 عنصری با آی دی submenu-1-1 را ظاهر کن.

    در صورت علاقه به این مبحث ، میتوانید مقاله خوبی در این زمینه را با کلیک در اینجا ببینید.

    .

    ۲- یک عنصر دقیقاً بعد از عنصر اصلی باشد:

    ممکن است یک عنصر در زیرمجموعه عنصر دیگر نباشد. بلکه زیر آن باشد.
    دقت کنید که منظور ما دقیقاً بعد از عنصری است که موس روی آن قرار می‌گیرد؛ هیچ تگ دیگری نباید بین دو تگ مورد نظر باشد وگرنه کد از کار می‌افتد.

    برای این کار، از علامت + به صورت زیر استفاده کنید:

    کد CSS نمایش و مخفی کردن با آمدن موس

    خروجی این مثال را در اینجا ببینید

    نکته: عنصر مخفی حتماً باید بعد از عنصر اصلی و بدون هیچ فاصله‌ای قرار گرفته باشد.

    .

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

    The Adjacent-Sibling Selector

    On a CSS hover event, can I change another div’s styling?

    Using only CSS, show div on hover over <a>

    .

    ۳- یک عنصر بعد از عنصر اصلی باشد در حالی که تگ‌های دیگری بین دو تگ قرار گرفته باشند :

    شاید در بحث نمایش divها با قرار گرفتن موس روی یک لینک، پرکاربردترین مورد، همین مورد باشد.

    یعنی طبیعتاً بین عنصر اصلی شما و عنصر مخفی چند تگ قرار دارد.

    در این حالت باید از علامت تایلد ~ به صورت زیر استفاده کنید:

    کد CSS نمایش و مخفی کردن با آمدن موس

    خروجی این مثال را در اینجا ببینید

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

    General Sibling Selector (CSS selector)

    On a CSS hover event, can I change another div’s styling? [duplicate]

    .

    نکات مهم:

    – اگر بخواهید در مرورگرهای IE این امکان پشتیبانی شود، باید یک وصله را به صفحه خود ضمیمه کنید. فایل cssHoverFix.htc را از اینجا دانلود کنید ، و مانند کدهای بالا آن‌را به body ضمیمه کنید.

    – در مرورگرهای IE باید صفحه شما حتماً DOCTYPE مشخصی داشته باشد. (به هر حال، باید ست شده باشد)

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

    کد جاوا اسکریپت نمایش و مخفی کردن آیتم

    موفق باشید؛

    لازمه به ذکر است ، این مطلب توسط مدیریت داده پردازان مدرن ویرایش و تکمیل سازی شده است، اصل مطلب به نویسندگی آقای : حمیدرضا نیرومند بوده است.

    2 دیدگاه دربارهٔ «کد CSS نمایش و مخفی کردن با آمدن موس»

    دیدگاه‌ خود را بنویسید

    نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

    اشتراک گذاری این مقاله

    اشتراک گذاری در facebook
    اشتراک گذاری در google
    اشتراک گذاری در twitter
    اشتراک گذاری در linkedin
    اشتراک گذاری در whatsapp

    اطلاعات مقاله

    کسب درآمد از اینترنت

    کسب درآمد از اینترنت با پاورپوینت

    کسب درآمد از اینترنت به صورت دائمی

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

    چه به صورت تمام وقت و چه به صورت پاره وقت ، کاملا منعطف اما تضمینی

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

     کسب درآمد از اینترنت با پاورپوینت

    خرید پاورپوینت از شما

    خرید پاورپوینت از شما - پاورپوینت‌ های خود را بفروشید
    پاورپوینت های شما را خریداریم…

    فروش پاورپوینت های شما یکی از روش‌های درآمدزایی از فایل هایی است که زمانی ساخته‌اید و از آنها استفاده کرده اید.

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

    جهت فروش پاورپوینت های خود به ما کافی است به لینک زیر مراجعه کنید…

    خرید پاورپوینت از شما

    فرصت خرید ویژه و مطمئن

    خرید ویژه پاورپوینت  

    پرداخت امن

    با توجه به اخذ SSL و تایید درگاه های پرداخت متصل به فروشگاه داده پردازان مدرن از جانب سیستم شاپرک، پرداخت امن را تجربه کنید.

     

    بازگشت بدون قید و شرط

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

     

    پشتیبانی فعال

    قبل ، در حین و پس از خرید ، در صورت نیاز به هر گونه پشتیبانی و راهنمایی با شماره تماس های اعلام شده در (تماس با ما) در کنار شما هستیم…

    عضویت در خبرنامه فروشگاه

    منتظر شگفتی های ما باشید…

    سری به این مطالب هم بزنید ...

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

    رشته های مهندسی – تمام رشته ها + 10 رشته پر طرفدار مهندسی

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

    ادامه مطلب

    مدیریت تب های محصولات ووکامرس در قالب وردپرسی

    حذف عنوان توضیحات در محتوای تب هنگامی که شما به صفحه محصول مراجعه می‌کنید، یک توضیح طولانی برای محصول را ندارید. در مقابل ممکن است …

    ادامه مطلب
    زمان پخش برنامه های نوروز ۱۴۰۰

    زمان پخش برنامه های نوروز ۱۴۰۰

    زمان پخش برنامه های نوروز ۱۴۰۰ – سریال های نوروز 1400 – ساعت پخش سریال های نوروز 1400 – تاریخ پخش سریال های نوروز ۱۴۰۰ …

    ادامه مطلب
    لوگو داده پردازان مدرن - پاورپوینت درجه یک

    پاورپوینت درجه یک : 1PPT.ir معرفی ، محصولات ، فروش

    پاورپوینت درجه یک : 1PPT.ir معرفی ، محصولات ، فروش داده پردازان مدرن مجموعه داده پردازان مدرن در سال 1398 تصمیم به راه اندازی فروشگاه …

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

    تکه شدن کلمات در پاورپوینت و ورد – شکسته شدن کلمات در پایان خط

    تکه شدن کلمات در پاورپوینت و ورد – شکسته شدن کلمات در پایان خط رفع مشکل شکسته شدن کلمات در انتهای خطوط متن پاورپوینت و …

    ادامه مطلب
    افزونه حذف تصاویر اضافی در وردپس

    افزونه حذف تصاویر اضافی در وردپس

    افزونه حذف تصاویر اضافی در وردپس پاک کردن سایز های اضافی تصاویر در وردپرس یکی از مشکلات وردپرس ایجاد فایل های کپی با سایزهای مختلف …

    ادامه مطلب
    شماره گذاری صفحات اول پایان نامه با حروف ابجد

    شماره گذاری صفحات اول پایان نامه با حروف ابجد

    شماره گذاری صفحات اول پایان نامه با حروف ابجد چگونه در یک سند word ،دو نوع شماره گذاری برای صفحات داشته باشیم؟ در اکثر پایان …

    ادامه مطلب
    گرایش های رشته مدیریت بازرگانی در دکتری

    گرایش های رشته مدیریت بازرگانی در دکتری

    گرایش های رشته مدیریت بازرگانی در دکتری : بر اساس دفترچه انتخاب رشته مطقع دکتری سازمان سنجش سال 1399 ، گرایش های قابل انتخاب به …

    ادامه مطلب