Čisti učinek fokusa galerije CSS z :not

V preteklosti sem pogosto moral ugotoviti, kako dodati sloge vsem elementom v vsebniku, vendar ne lebdeči.

Ta učinek zahteva izbiro bratov in sester lebdečega elementa. Včasih sem za to uporabil JavaScript, dodal ali odstranil razred, ki je definiral ustrezna pravila CSS mouseenter in mouseleave dogodki, podobni temu:

Čeprav koda deluje, mi je občutek vedno govoril, da mora obstajati način čistega CSS za dosego enakega rezultata. Pred nekaj leti, ko sem delal na določenem drsniku za svoje podjetje, sem prišel do rešitve, podobne kako je Chris Geelhoed poustvaril slavno Netflixovo animacijo domače strani in razumel sem, da za to ne potrebujem več JavaScripta.

Pred nekaj meseci sem poskušal implementirati enak pristop k omrežnemu viru na spletni strani svojega podjetja in — bum — ni delovalo zaradi vrzeli med elementi!

Na mojo srečo se je izkazalo, da ni nujno, da ostane tako in za to spet nisem potreboval JavaScripta.

Označevanje in osnovni CSS

Začnimo s kodiranjem s pripravo ustrezne oznake:

• .grid temelji na mreži

  seznam;

• in .grid__child elementi so

otroci, s katerimi želimo komunicirati.

Oznaka izgleda takole:

Slog bi moral izgledati takole:

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

Ta primer kode bo ustvaril tri elemente seznama, ki zasedajo tri stolpce v mreži.

Moč izbirnikov CSS

Zdaj pa dodajmo nekaj interaktivnosti. Pristop, ki sem ga prvotno uporabil, je temeljil na dveh korakih:

1. lebdenje na vsebniku bi moralo spremeniti sloge vseh elementov znotraj ...  
2. ... razen tistega, na katerem trenutno lebdi kazalec.

Začnimo z prijemom vsakega otroka, medtem ko kazalec lebdi nad vsebnikom:

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

Drugič, izključimo trenutno lebdeči element in zmanjšajmo opacity katerega koli drugega otroka:

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

In to bi bilo popolnoma dovolj za vsebnike brez vrzeli med podrejenimi elementi:

Vendar v mojem primeru teh vrzeli nisem mogel odstraniti:

Ko sem premikal miško med ploščicami, so vsi otroški elementi zbledeli.

Ignoriranje vrzeli

Predvidevamo lahko, da so vrzeli deli vsebnika, ki jih njegovi podrejeni elementi ne prekrivajo. Učinka ne želimo zagnati vsakič, ko kazalec vstopi v vsebnik, ampak ko lebdi nad enim od elementov v notranjosti. Ali lahko potem prezremo premikanje kazalca nad vrzelmi? 

Da, lahko, z uporabo pointer-events: none o .grid zabojnik in jih prinese nazaj s pointer-events: auto na svoje otroke:

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

/* ... */

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

Dodajmo samo nekaj kul prehoda na motnosti in že imamo pripravljeno komponento:

Verjetno je še kul, ko dodamo več ploščic in ustvarimo dvodimenzionalno postavitev:

Končni CSS izgleda takole:

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

S samo 2 dodatnima vrsticama kode smo premagali problem vrzeli!

Možne težave

Čeprav gre za kompaktno rešitev, je v nekaterih situacijah morda potrebno nekaj rešitev.

Na žalost ta trik ne bo deloval, če želite, da se vsebnik lahko pomika, npr. v nekakšnem vodoravnem drsniku. The pointer-events: none style bi prezrl ne samo dogodek lebdenja, ampak tudi vse druge. V takih situacijah lahko zavijete .grid v drugem vsebniku, takole:

Povzetek

Močno vas spodbujam, da eksperimentirate in poskušate najti enostavnejši in bolj izviren pristop za naloge, za katere se običajno pričakuje, da bodo imele določeno stopnjo zapletenosti. Spletne tehnologije, kot je CSS, postajajo vse močnejše in z uporabo že pripravljenih domačih rešitev lahko dosežete odlične rezultate, ne da bi morali vzdrževati svojo kodo in jo odstopiti prodajalcem brskalnikov.

Upam, da vam je bila ta kratka vadnica všeč in koristna. hvala

Avtor je izbral Tech Izobraževanje prejeti donacijo v okviru Pišite za donacije Program.