Efek Fokus Galeri CSS Murni dengan :not

Seringkali di masa lalu, saya perlu mencari cara untuk menambahkan gaya ke semua elemen di dalam wadah tetapi tidak yang melayang.

Efek ini membutuhkan pemilihan saudara dari elemen melayang. Saya dulu menerapkan JavaScript untuk ini, menambahkan atau menghapus kelas yang mendefinisikan aturan CSS yang tepat di mouseenter dan mouseleave peristiwa, mirip dengan ini:

Meskipun kodenya berhasil, firasat saya selalu memberi tahu saya bahwa harus ada cara CSS murni untuk mencapai hasil yang sama. Beberapa tahun yang lalu, saat mengerjakan slider tertentu untuk perusahaan saya, saya menemukan solusi yang mirip dengan bagaimana Chris Geelhoed membuat ulang animasi beranda Netflix yang terkenal dan saya mengerti bahwa saya tidak membutuhkan JavaScript untuk ini lagi.

Beberapa bulan yang lalu saya mencoba menerapkan pendekatan yang sama untuk feed berbasis grid di situs web perusahaan saya dan — boom — itu tidak berhasil karena kesenjangan di antara elemen-elemennya!

Untungnya bagi saya, tampaknya tidak harus tetap seperti ini, dan sekali lagi saya tidak membutuhkan JavaScript untuk itu.

Markup dan CSS dasar

Mari kita mulai coding dengan menyiapkan markup yang tepat:

• .grid berbasis grid

  daftar;

• dan .grid__child elemen adalah

anak-anak yang ingin kita ajak berinteraksi.

Markupnya terlihat seperti ini:

Gayanya akan terlihat seperti ini:

.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;
}

Kode contoh ini akan membuat tiga item daftar yang menempati tiga kolom dalam kotak.

Kekuatan pemilih CSS

Sekarang, mari tambahkan beberapa interaktivitas. Pendekatan yang saya terapkan pada awalnya didasarkan pada dua langkah:

1. melayang di wadah harus mengubah gaya semua elemen di dalamnya…  
2. …kecuali kursor yang sedang melayang saat ini.

Mari kita mulai dengan meraih setiap anak saat kursor melayang di atas wadah:

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

Kedua, mari kita mengecualikan item yang saat ini melayang dan mengurangi opacity dari anak lain:

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

Dan ini akan cukup sempurna untuk wadah tanpa celah di antara elemen anak:

Namun, dalam kasus saya, saya tidak dapat menghapus celah ini:

Ketika saya menggerakkan mouse di antara ubin, semua elemen anak memudar.

Mengabaikan kesenjangan

Kita dapat berasumsi bahwa celah adalah bagian dari wadah yang tidak dilapisi oleh anak-anaknya. Kami tidak ingin menjalankan efek setiap kali kursor memasuki wadah, melainkan saat melayang di atas salah satu elemen di dalamnya. Bisakah kita mengabaikan kursor yang bergerak di atas celah? 

Ya, kita bisa, menggunakan pointer-events: none pada .grid wadah dan membawanya kembali dengan pointer-events: auto pada anak-anaknya:

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

/* ... */

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

Mari kita tambahkan beberapa transisi keren pada opacity dan kami memiliki komponen yang siap:

Mungkin lebih keren lagi saat kita menambahkan lebih banyak ubin dan membuat tata letak 2 dimensi:

CSS terakhir terlihat seperti ini:

.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;
}

Dengan hanya 2 baris kode tambahan, kami mengatasi masalah celah!

Masalah yang mungkin terjadi

Meskipun ini adalah solusi yang ringkas, ada beberapa situasi di mana mungkin memerlukan beberapa solusi.

Sayangnya, trik ini tidak akan berfungsi saat Anda ingin wadah dapat digulir, misalnya, seperti pada semacam penggeser horizontal. Itu pointer-events: none style akan mengabaikan tidak hanya acara hover tetapi semua yang lain juga. Dalam situasi seperti itu, Anda dapat membungkus .grid di wadah lain, seperti ini:

Kesimpulan

Saya sangat menganjurkan Anda untuk bereksperimen dan mencoba menemukan pendekatan yang lebih sederhana dan lebih asli untuk tugas-tugas yang biasanya diharapkan memiliki tingkat kerumitan tertentu. Teknologi web, seperti CSS, semakin canggih dan dengan menggunakan solusi asli yang siap pakai, Anda dapat mencapai hasil yang luar biasa tanpa perlu mempertahankan kode Anda dan menyerahkannya ke vendor browser.

Saya harap Anda menyukai tutorial singkat ini dan merasa bermanfaat. Terima kasih!

Penulis memilih Tech Pendidikan untuk menerima sumbangan sebagai bagian dari Tulis untuk DONASI program.