Tämä artikkeli käsittelee toteutusmenettelyä hover- ja muiden näkyvyysominaisuuksien käyttämiseen Tailwind CSS:n avulla.
Kuinka käyttää Hover- ja muita valtioita Visibility-apuohjelmalla Tailwindissä?
Näkyvyysapuohjelmaa voidaan käyttää osoittimen ja muiden tilojen ohella tekemään näkyvyyteen muutoksia käyttäjän vuorovaikutuksessa. Näkyvyysapuohjelman alla on kolme luokkaa, nimittäin ' näkyvissä ”, “ näkymätön ”, ja ” romahdus ”. Integroidaan joitain näkyvyysluokkia hover-tiloilla alla oleviin esimerkeihin ymmärtämisen helpottamiseksi.
Esimerkki 1: Hover-tilan soveltaminen 'näkymättömässä' luokassa
Tässä tapauksessa valittu elementti piilotetaan, kun käyttäjän osoitin vie hiiren elementin päälle, koodi näkyy alla:
< kehon >
< div luokkaa = 'grid grid-cols-3 gap-4 my-4 mx-4' >
< div luokkaa = 'bg-blue-500 p-3 pyöristetty tekstikeskus' > 01 < / div >
< div luokkaa = 'bg-blue-500 p-3 hover: näkymätön pyöristetty tekstikeskus' > 02 < / div >
< div luokkaa = 'bg-blue-500 p-3 pyöristetty tekstikeskus' > 03 < / div >
< / div >
< / kehon >
Selitys yllä olevalle koodille:
- Ensin luodaan emo-div, joka luo kolmisarakkeen ruudukkoasettelun, jossa on välilyönti jokaisen sarakkeen ja marginaalin väliin. 4px ”. Tailwind CSS:n käyttö ruudukko ”, “ ruudukko-sarakkeet-3 ”, “ aukko ”, “ minun ”, ja ” mx ”luokat vastaavasti.
- Seuraavaksi kolme lasta' div ” elementtejä luodaan ja niihin sovelletaan perustyyliä.
- Sitten ' leijuu ” tila tai valitsin CSS:ssä on määritetty toiselle ”div”- ja ” näkymätön ' on määritetty sille erotettuna kaksoispisteellä ' : ”merkki. Tämä tekee toisesta div:stä näkymätön, kun hiiri viedään sen päälle.
Verkkosivun esikatselu toteutusvaiheen jälkeen:
Yllä oleva gif osoittaa, että toinen div on tulossa näkymättömäksi hiiren osoitin.
Esimerkki 2: Aktiivisen tilan käyttäminen 'näkymättömässä' luokassa
'Aktiivinen' tila käyttää tyylejä, kun käyttäjä valitsee tietyn elementin eikä poistu. Aivan kuten tekstilaatikot, kun käyttäjä alkaa syöttää tietoja kenttään, kenttä on tällä hetkellä aktiivinen. Saadaksesi selkeämmän käsityksen aktiivisesta tilasta ja kuinka se toimii 'näkymättömän' luokan kanssa, käy alla olevassa koodissa:
< kehon >< div luokkaa = 'grid grid-cols-3 gap-4 my-4 mx-4' >
< div luokkaa = 'bg-blue-500 p-3 pyöristetty tekstikeskus' >01< / div >
< div luokkaa = 'bg-blue-500 p-3 aktiivinen: näkymätön pyöristetty tekstikeskus' >02< / div >
< div luokkaa = 'bg-blue-500 p-3 pyöristetty tekstikeskus' >03< / div >
< / div >
< / kehon >
Yllä olevassa koodissa luokka ' näkymätön ' on määritetty ' aktiivinen 'tila toiselle' div ” -elementti piilottaaksesi toisen div-elementin, kun se valitaan.
Suorituksen jälkeen verkkosivun esikatselu näyttää tältä:
Yllä oleva tulos osoittaa, että kun toinen 'div' valitaan, elementistä tulee näkymätön.
Johtopäätös
Hover-tilaa ja muita tiloja, kuten aktiivinen tai fokus, voidaan käyttää näkyvyysapuohjelman tarjoamien luokkien kanssa valittujen elementtien näkyvyysominaisuuksien muokkaamiseen. Elementtien näkyvyyden muuttamiseksi hiiren osoittimessa käytetään hover-luokkaa näkyvyysluokissa, jotka erotetaan värillä, kuten ' hover:näkyvä ' tai ' hover:invisible ”. Tässä blogissa on selostettu menettelytapa, jolla leijuustiloja sovelletaan näkyvyysapuohjelmaan.