Puhdas CSS Gallery Focus -tehoste :notilla

Usein aiemmin minun piti selvittää, kuinka lisätä tyylejä kaikkiin elementteihin säilön sisällä, mutta emme leijunut yksi.

Tämä tehoste edellyttää leijutun elementin sisarusten valitsemista. Käytin tähän JavaScriptiä lisäämällä tai poistamalla luokan, joka määritti oikeat CSS-säännöt mouseenter ja mouseleave samankaltaisia ​​tapahtumia:

Vaikka koodi tekee tempun, sisäinen tunne kertoi minulle aina, että täytyy olla jokin puhdas CSS-tapa saavuttaa sama tulos. Muutama vuosi sitten, kun työskentelin tietyn liukusäätimen parissa yritykselleni, keksin vastaavan ratkaisun kuinka Chris Geelhoed loi uudelleen kuuluisan Netflixin kotisivuanimaatiota ja ymmärsin, etten tarvinnut JavaScriptiä tähän enää.

Pari kuukautta sitten yritin ottaa käyttöön saman lähestymistavan ruudukkopohjaiseen syötteeseen yritykseni verkkosivuilla, ja - buumi - se ei toiminut elementtien välisen aukon vuoksi!

Minulle onneksi näytti siltä, ​​että sen ei tarvitse jäädä tällaiseksi, enkä taaskaan tarvinnut JavaScriptiä siihen.

Merkintä ja perus-CSS

Aloitetaan koodaus valmistamalla oikea merkintä:

• .grid on ruudukkopohjainen

  luettelo;

• ja .grid__child elementit ovat

lapsia, joiden kanssa haluamme olla tekemisissä.

Merkintä näyttää tältä:

Tyylin pitäisi näyttää tältä:

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

Tämä esimerkkikoodi luo kolme luettelokohdetta, jotka kattavat kolme saraketta ruudukossa.

CSS-valitsimien teho

Lisätään nyt vähän interaktiivisuutta. Alun perin soveltamani lähestymistapa perustui kahteen vaiheeseen:

1. säiliön päällä leijumisen pitäisi muuttaa kaikkien sisällä olevien elementtien tyylejä…  
2. …paitsi se, jonka kohdistin leijuu tällä hetkellä.

Aloitetaan tarttumalla jokaiseen lapseen, kun kohdistin on säiliön päällä:

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

Toiseksi jätetään pois tällä hetkellä leijuva kohde ja vähennetään opacity jostain muusta lapsesta:

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

Ja tämä riittäisi täydellisesti säiliöille, joissa ei ole rakoja lapsielementtien välillä:

Omassa tapauksessani en kuitenkaan voinut poistaa näitä aukkoja:

Kun liikutin hiirtä laattojen välissä, kaikki lasten elementit häipyivät.

Aukkojen huomioimatta jättäminen

Voimme olettaa, että aukot ovat säiliön osia, joita sen lapset eivät peitä. Emme halua suorittaa tehostetta joka kerta, kun kohdistin tulee säiliöön, vaan pikemminkin kun se liikkuu jonkin sisällä olevan elementin päällä. Voimmeko sitten jättää huomioimatta rakojen yläpuolella liikkuvan kohdistimen? 

Kyllä, voimme käyttää pointer-events: none på den .grid kontti ja tuoda ne takaisin pointer-events: auto sen lapsiin:

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

/* ... */

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

Lisätään vain hieno siirtymä opasiteetille ja meillä on valmis komponentti:

Se on luultavasti vielä siistimpää, kun lisäämme lisää laattoja ja luomme kaksiulotteisen asettelun:

Lopullinen CSS näyttää tältä:

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

Vain 2 ylimääräisellä koodirivillä voitimme aukko-ongelman!

Mahdolliset ongelmat

Vaikka se on kompakti ratkaisu, on tilanteita, joissa se saattaa vaatia kiertotapoja.

Valitettavasti tämä temppu ei toimi, kun haluat säiliön olevan vieritettävänä, kuten jossain vaakasuuntaisessa liukusäätimessä. The pointer-events: none tyyli jättäisi huomioimatta vain hover-tapahtuman, vaan myös kaikki muut. Tällaisissa tilanteissa voit kääriä .grid toisessa astiassa, kuten tämä:

Yhteenveto

Suosittelen vahvasti kokeilemaan ja löytämään yksinkertaisempi ja luonnollisempi lähestymistapa tehtäviin, joiden odotetaan yleensä olevan jonkin verran monimutkaisia. Verkkoteknologiat, kuten CSS, ovat yhä tehokkaampia, ja käyttämällä valmiita natiiviratkaisuja voit saavuttaa mahtavia tuloksia ilman, että sinun tarvitsee ylläpitää koodiasi ja luovuttaa se selaimen toimittajille.

Toivottavasti pidit tästä lyhyestä opetusohjelmasta ja pidit siitä hyödyllisenä. Kiitos!

Kirjoittaja valitsi Teknologia koulutus vastaanottaa lahjoituksen osana Kirjoita lahjoituksia varten ohjelma.