Kesan fokus galeri CSS tulen dengan: tidak

Sebelum ini, menggayakan semua elemen dalam bekas kecuali yang dilanda JavaScript yang sering melibatkan JavaScript. Ini biasanya bermakna menambah atau mengeluarkan kelas pada peristiwa

dan mouseenter. Walaupun berfungsi, penyelesaian CSS tulen sering lebih baik. Artikel ini memperincikan pendekatan CSS sahaja, yang pada mulanya diilhamkan oleh teknik yang digunakan dalam mencipta semula animasi seperti laman utama Netflix. Walau bagaimanapun, percubaan sebelumnya menggunakan kaedah ini gagal pada susun atur berasaskan grid kerana jurang antara unsur-unsur. Artikel ini membentangkan penyelesaian yang elegan mengendalikan jurang ini. mouseleave

markup dan asas CSS

HTML asas menggunakan senarai berasaskan grid:

• : grid kontena. .grid
• : item grid individu. .grid__child

markup adalah seperti berikut:

gaya awal CSS grid dan anak -anaknya:

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

Ini mewujudkan grid tiga lajur (menyesuaikan secara dinamik berdasarkan saiz skrin) dengan jurang antara item.

memanfaatkan pemilih CSS

Interaksi teras melibatkan dua langkah:

melayang bekas mempengaruhi semua kanak -kanak.
kanak -kanak yang melayang itu sendiri dikecualikan.

Pertama, kami mensasarkan semua kanak -kanak apabila bekas itu berlegar:

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

Seterusnya, kami mengecualikan kanak -kanak yang sedang berlegar menggunakan

untuk mengurangkan kelegapan: :not(:hover)

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

Ini berfungsi dengan sempurna tanpa jurang antara unsur -unsur. Walau bagaimanapun, dengan jurang, kesannya mencetuskan walaupun kursor berada di atas jurang itu sendiri.

Menangani jurang

Penyelesaiannya terletak pada peristiwa penunjuk mengawal. Dengan menetapkan

pada bekas pointer-events: none dan .grid pada anak -anaknya, kami memastikan kesan hover hanya mencetuskan apabila secara langsung ke atas elemen kanak -kanak, dengan berkesan mengabaikan jurang. pointer-events: auto

Menambah peralihan untuk perubahan kelegapan yang lebih lancar melengkapkan kesan.

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

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

CSS akhir yang menggabungkan penyelesaian ini ialah:

Batasan Potensi

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

Walaupun berkesan, pendekatan ini mungkin memerlukan pelarasan untuk bekas scrollable (mis., Slider mendatar). Dalam kes sedemikian, membungkus

dalam bekas lain boleh menjadi penyelesaian.

.grid Kesimpulan

Ini menunjukkan penyelesaian CSS tulen yang kuat untuk cabaran interaksi yang sama. Dengan memanfaatkan pemilih CSS lanjutan dan kawalan acara penunjuk, kami mencapai kesan yang canggih tanpa menggunakan JavaScript, yang membawa kepada kod yang lebih bersih dan lebih diselenggara. Ini menonjolkan keupayaan CSS yang semakin meningkat dan menggalakkan meneroka penyelesaian asli sebelum menambah kerumitan JavaScript.

Atas ialah kandungan terperinci Kesan fokus galeri CSS tulen dengan: tidak. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!