Hogyan cserélje ki a képet, ha lebeg a kurzort css
Sokan még több, függetlenül a tudás elrendezése és programozás, képű
helyettesítő képet, amikor mutogatnak rá. A leggyakoribb példa - az egérmutatót a gombot. Ennek eredményeként, a kép megváltozott, talán még a méretét és alakját. Ebben a cikkben megmutatom, hogyan lehet cserélni a képet, mérete megváltozik, ha lebeg felette, kizárólag CSS.
A jövőben, akkor ajánlott használni ezt a módszert, mert a JS azt jelenti, hogy kockáztatják, hogy a felhasználót, hogy le van tiltva a böngésző beállításait, így a személy nem látja minden olyan adatot vagy értelme az ötletek.
Mit fogunk használni? Elég, ha lebeg, és ál-tulajdonságok háttérben. A fájl maga is egy html fájl és a kép.
A végrehajtás egyszerű. A kód két részből áll:
1. html a szükséges div
Most azt javaslom, hogy fontolja meg egy szórakoztató és egyszerű példa a művelet kódját. Ha szükséges, akkor töltse le és szedjük szét az elvet a munka a számítógépen.
Demo letöltése a forráskód
Mint látható a példában, a kép által meghatározott alapértelmezett (azaz image001) jelenik meg, ha az oldal betöltődik, és image002 csak a kurzor az első kép.
Figyelem! Meg kell határozni a szélesség és a magasság az egység, különben a div csak nem jelenik meg. Szintén legyen óvatos pontos méreteit az egység, mint a kép méretezhető belül nem azért, mert úgy vélik, háttérben. Ha a blokk mérete kisebb lesz, és ez lesz látható, csak a kép egy részét.
A leggyakrabban használt egy módja annak, hogy változtatni a képet. Ha azt szeretnénk, hogy cserélje ki a képet, más esetekben, például, ha rákattint, akkor kell használni nem lebeg. és aktív.
Köszönjük a figyelmet!