Mulți dintre voi, indiferent de cunoștințele de codificare și programare, s-au întâlnit
înlocuirea imaginii când treceți peste ea. Cel mai obișnuit exemplu este plasarea mouse-ului peste buton. Ca rezultat, imaginea sa schimbat, poate chiar și în dimensiune și formă. În acest articol voi arăta cum puteți înlocui imaginea, puteți schimba dimensiunea acesteia când treceți peste ea, folosind doar CSS.
Pentru viitor, vă recomandăm să utilizați această metodă, deoarece utilizarea JS înseamnă că riscați să ajungeți la utilizatorul de la care este dezactivat în setările browserului, ca urmare a faptului că o persoană nu poate vedea detalii sau înțelege sensul ideii.
Ce vom folosi? Avem nevoie de o hover pseudo-element și de o proprietate de fundal. Din fișiere este fișierul html însuși și imaginea.
În punerea în aplicare a tuturor este simplu. Codul este alcătuit din două părți:
1. html cu divul dorit
Acum vă sugerez să luați în considerare un exemplu distractiv și simplu al codului. Dacă doriți, puteți descărca și dezasambla principiul de lucru pe computer.
Demonstrație Descărcați surse
După cum puteți vedea în exemplu, imaginea implicită (adică image001) apare atunci când pagina se încarcă și image002 numai când mutați cursorul la prima imagine.
Atenție vă rog! Este necesar să specificați lățimea și înălțimea blocului, în caz contrar divul nu va fi afișat. De asemenea, aveți grijă cu dimensiunea exactă a blocului, deoarece imaginea din interior nu va fi scalată, deoarece este considerată o imagine de fundal. Dacă dimensiunile blocurilor sunt mai mici, numai o parte a imaginii va fi vizibilă.
Cel mai adesea, aceasta este metoda de modificare a imaginii. Dacă doriți să înlocuiți imaginea în alte cazuri, de exemplu, atunci când faceți clic pe, atunci nu mai trebuie să utilizați mouse-ul. dar activă.
Vă mulțumesc pentru atenție!
Articole similare
Trimiteți-le prietenilor: