یک جلوه تمرکز گالری CSS خالص با :not

اغلب اوقات در گذشته، من نیاز داشتم که بفهمم چگونه می توانم به همه عناصر داخل کانتینر استایل اضافه کنم نه معلق شده

این اثر مستلزم انتخاب خواهر و برادر یک عنصر شناور است. من از جاوا اسکریپت برای این کار استفاده می کردم و کلاسی را که قوانین CSS مناسب را تعریف می کرد اضافه یا حذف می کردم. mouseenter و mouseleave رویدادهای مشابه این:

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

چند ماه پیش سعی می‌کردم همین رویکرد را برای یک فید مبتنی بر شبکه در وب‌سایت شرکتم پیاده‌سازی کنم و - بوم - به دلیل شکاف بین عناصر کار نکرد!

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

نشانه گذاری و CSS پایه

بیایید با تهیه نشانه گذاری مناسب شروع به کدنویسی کنیم:

• .grid مبتنی بر شبکه است

  لیست؛

• و .grid__child عناصر هستند

کودکانی که می خواهیم با آنها ارتباط برقرار کنیم.

نشانه گذاری به این صورت است:

استایل باید به شکل زیر باشد:

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, 15rem);
  grid-gap: 1rem;
}

.grid__child {
  background: rgba(0, 0, 0, .1);
  border-radius: .5rem;
  aspect-ratio: 1/1;
}

این کد مثال سه آیتم لیست را ایجاد می کند که سه ستون را در یک شبکه اشغال می کنند.

قدرت انتخابگرهای CSS

حالا بیایید کمی تعامل اضافه کنیم. رویکردی که من در ابتدا اعمال کردم بر اساس دو مرحله بود:

1. شناور کردن روی ظرف باید استایل تمام عناصر داخل آن را تغییر دهد…  
2. ... به جز موردی که مکان نما در حال حاضر معلق است.

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

.grid:hover .grid__child {
  /* ... */
}

ثانیاً، بیایید موردی که در حال حاضر شناور شده است را حذف کنیم و آن را کاهش دهیم opacity از هر کودک دیگری:

.grid:hover .grid__child:not(:hover) {
  opacity: 0.3;
}

و این برای ظروف بدون شکاف بین عناصر کودک کاملاً کافی است:

با این حال، در مورد من، من نتوانستم این شکاف ها را حذف کنم:

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

نادیده گرفتن شکاف ها

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

بله، ما می توانیم، با استفاده از pointer-events: none در .grid ظرف و بازگرداندن آنها با pointer-events: auto بر فرزندانش:

.grid {
  /* ... */
  pointer-events: none;
}

/* ... */

.grid__child {
  /* ... */
  pointer-events: auto;
}

بیایید فقط مقداری انتقال جالب روی opacity اضافه کنیم و یک جزء آماده داریم:

وقتی کاشی‌های بیشتری اضافه می‌کنیم و یک چیدمان دو بعدی ایجاد می‌کنیم، احتمالاً خنک‌تر می‌شود:

CSS نهایی به شکل زیر است:

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, 15rem);
  grid-gap: 3rem;
  pointer-events: none;
}

.grid:hover .grid__child:not(:hover) {
  opacity: 0.3;
}

.grid__child {
  background: rgba(0, 0, 0, .1);
  border-radius: .5rem;
  aspect-ratio: 1/1;
  pointer-events: auto;
  transition: opacity 300ms;
}

تنها با 2 خط کد اضافی، بر مشکل شکاف غلبه کردیم!

مسائل احتمالی

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

متأسفانه، این ترفند زمانی که می‌خواهید ظرف قابل پیمایش باشد، کار نمی‌کند، مثلاً در نوعی لغزنده افقی. این pointer-events: none سبک نه تنها رویداد شناور بلکه همه رویدادهای دیگر را نیز نادیده می گیرد. در چنین شرایطی، می توانید بسته بندی کنید .grid در ظرف دیگری مانند این:

خلاصه

من قویاً شما را تشویق می‌کنم که آزمایش کنید و سعی کنید یک رویکرد ساده‌تر و بومی‌تر برای کارهایی که معمولاً انتظار می‌رود سطحی از پیچیدگی داشته باشند، بیابید. فناوری‌های وب، مانند CSS، روز به روز قدرتمندتر می‌شوند و با استفاده از راه‌حل‌های بومی خارج از جعبه می‌توانید بدون نیاز به حفظ کد خود به نتایج عالی دست پیدا کنید و آن را به فروشندگان مرورگر واگذار کنید.

امیدوارم این آموزش کوتاه مورد پسند شما واقع شده باشد و مفید واقع شده باشد. با تشکر!

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