Ako vytvoriť čistý CSS efekt

CSS nemá pseudoklas zacielenie na udalosti kliknutí, a toto predstavuje jeden z nich najväčšie body bolesti vývojárov front-end. Najbližšia pseudotrieda je : aktívny ktorý štýl prvku za dobu, ktorú používateľ stláča nad svojou myšou.

Tento efekt je však krátkodobý: akonáhle užívateľ uvoľní myš, : aktívny už nefunguje. Musíme nájsť iný spôsob emulovať udalosť kliknutia v CSS.

Tento príspevok bol napísaný v odpovedi na žiadosť čitateľa a vysvetlí, ako to zacieľte na udalosť kliknutia s čistým CSS v konkrétnom prípade použitia, zväčšenie obrazu.

Môžete vidieť konečný výsledok nižšie - riešenie iba pre CSS obrázok zväčšiť kliknutím.

Kedy používať iba riešenie CSS

Predtým, než začnem, chcem povedať, že pri zväčšení obrazu doporučujeme iba metódu CSS (ktorá mení rozmery obrázka) len vtedy, keď chcete jednoposteľová alebo a skupina málo obrázkov mať funkciu zväčšenia.

Pre riadny galéria, JavaScript poskytuje väčšiu flexibilitu a efektívnosť.

Front-end techniky, ktoré použijeme

Teraz, keď vás upozornili, poďme sa rýchlo pozrieť 3 kľúčové techniky budeme používať:

1. Značku HTML ktorý umožňuje prehliadačom vytvoriť prepojiteľné oblasti nad obrázkom. Prečítajte si viac o prvkom v mojom staršom príspevku.
2. USEMAP atribút štítok, ktorý spojí obraz na mapu obrázkov.
3. : cieľová Pseudo-trieda CSS ktorý predstavuje prvok, ktorý bol zacielený pomocou jeho voliča ID.

1. Vytvorte základňu HTML

Najprv vytvorte základňu HTML. V nižšie uvedenom kóde pridáme obrázok, ktorý sa má zväčšiť a zväčšiť & ikony zatvorte tlačidlo na priblíženie a vzdialenie.

Dôležité je, aby mal obrázok na zväčšenom obrázku a tlačidlo Zavrieť musí mať odkaz, ktorý má href = "#" atribút, vysvetlím, prečo neskoršie v príspevku.

2. Pridajte CSS

Spočiatku ikona Zavrieť by sa nemali zobrazovať. pozície, okraj-, ľavý, a dno vlastnosti miesto Rozbaľte a zatvorte ikony kde chceme, aby boli - v pravom hornom rohu obrázku.

pointer-events: žiadne; pravidlo umožňuje udalosti myši prejsť ikonou Rozbaliť a dosiahnuť obrázok.

 .img výška: 150px; šírka: 200px; . zatvoriť background-image: url ("Close-icon.png"); opakovanie pozadia: opakovanie; dno: 418px; zobrazenie: žiadne; výška: 32px; vľavo: 462px; margin-top: -32px; pozícia: relatívna; šírka: 32px;  .expand bottom: 125px; margin-left: -32px; margin-right: 16px; pointer-events: žiadne; pozícia: relatívna;  

3. Pridajte mapu obrázkov

Na mape obrázkov sa zobrazuje oblasti s možnosťou kliknutia by mala byť v pravom hornom rohu obrazu priamo pod ikonou Rozbaľte a o jej veľkosti. Umiestnite prvku pred prvým tag v HTML. V ďalšom kroku vytvoríme obrázok na mape.

Vo vyššie uvedenom kódovom bloku tag označuje tvaru, veľkosti a URI spojiteľnej oblasti vnútri obrázkovej mapy. Pre obdĺžnikový tvar, tvar atribút trvá rect hodnota a hodnota štyri hodnoty z coords atribút predstavuje vzdialenosť v pixeloch medzi:

1. ľavý okraj obrazu a ľavý okraj oblasti odkazu
2. horný okraj obrazu a horný okraj oblasti odkazu
3. ľavý okraj obrazu a pravý okraj oblasti odkazu
4. horný okraj obrazu a spodný okraj oblasti odkazu

Hodnota href atribút musí byť atribút hash identifikátor obrazu (to je dôvod, prečo by mal obrázok mať id).

4. Prilepte obrázok na mapu obrázkov

Pridajte USEMAP atribút obrázku tak, aby väzbu na mapu obrázkov. Jeho hodnota musí byť hash reprezentácia názov atribút štítok sme pridali v kroku 3.

Kliknite na oblasť obrázkových máp teraz leží za tlačidlom Rozbaľ. Keď používateľ klikne na tlačidlo Rozbaľte, je to oblasť, na ktorú sa dá kliknúť, v skutočnosti kliknete - nezabudnite, že sme urobili tlačidlo Rozšíriť “zjazdný” s pointer-events: žiadne; v kroku 2.

Týmto spôsobom používateľ zacieľuje na samotný obrázok kliknutím na ňu a po kliknutí na tlačidlo URI sa zobrazí prípona "# Img1" identifikátor fragmentu.

5. Štýl : cieľová Pseudo-Class

Až pokým "# Img1" identifikátor fragmentu je na konci identifikátora URI, cieľový obrázok môže byť v štýle : cieľová pseudo-class

Rozmery cieleného obrázka sa zvýšia, zobrazí sa tlačidlo Zavrieť a tlačidlo Expand sa skryje.

 .img: cieľ výška: 450px; šírka: 500px;  .img: target + .close zobrazenie: blok;  .img: cieľ + .close + .expand zobrazenie: žiadne;  

Ako funguje tlačidlo Zavretie

Ako tlačidlo Zavrieť bolo pridané ako obrázok na pozadí (krok 2) a je vlastne značku s href = # atribút (krok 1), po jeho kliknutí odstráni identifikátor fragmentu od konca identifikátora URI. Preto to tiež odstráni : cieľová pseudo-class z obrázka a obrazu sa vráti na predchádzajúcu veľkosť.

Informácie o pozadí: Prečo a nie ?

Teraz už určite chápete, že najdôležitejšou vecou pre toto riešenie, ktoré je len pre CSS, je pracovať zacieľte obrázok pomocou tlačidla href = "# imgid" atribút, čo by sa mohlo vykonať aj pomocou namiesto mapy obrázkov.

štandardné hodnota pre tvar atribút vytvorí obdĺžniková spojovacia plocha, ktorá pokrýva celý obraz. Ak by ste mali používať namiesto toho by ste ho museli kódovať, aby ste pokryli obrázok, a na rovnaký účel budete možno musieť použiť obalový prvok.

Ak chcete podporiť IE prehliadače pred tým, budete chcieť buď použiť namiesto , alebo obrázok zväčšený kliknutím kdekoľvek na ňom (v tomto prípade nebude potrebné ikonu Expand).