# 123: Kui see klõpsates liigub, siis tehke midagi - CSS-trikid

Anonim

Selle video ajal on CSS-Tricksi nuppudel 3D-efekt. Need näevad välja nagu sinine tellis, mida vaatate ülevalt nurga all. Kui vajutate neile alla, käivitatakse nende aktiivne olek (nagu kõik lingid / nupud / sisendid) ja CSS liigutab neid alla ja paremale, ilmudes nii, nagu vajutaksite tellist sõna otseses mõttes natuke pinnale.

Mis on probleemiks? Niisuguse elemendi teisaldamisel (sellisel juhul muundage translate(3px, 3px);:) muudate ala, kus see vajutus käivitab DOM-sündmuse "click". Kui selle ajakirjanduse asukoht juhtub olema piirkonnas, mis on sellest klõpsatavast alast suurem, siis see ei käivitu. Nii et nupp näib olevat vajutatud, kuid tegelikult seda ei vajutata. See on imelik ja halb ning ootamatu käitumine.

Mõju on siiski lahe, nii et selles videos parandame selle, liigutades pseudoelemendi, et täita mahajäänud ruumi, muutes "klõpsatava" ala alati samaks.

Tutvuge demo Peniga.