Hogyan változtathatjuk meg a képet az egér felett lebegve

Ön itt van: Főoldal - CSS - CSS alapok - Hogyan változtathatjuk meg a képet az egér mozgatásakor

Hogyan változtathatjuk meg a képet az egér felett lebegve

Azt hiszem, gyakran találkoztál különböző helyszíneken, amikor egy egérrel mutatott képre mutatott, és ez megváltozott. A legegyszerűbb példa az egér felbillentése a gomb fölé. Tegyük fel, hogy ezután színe megváltozott, mintha aktív lett volna. Az egér mozgatásakor a kép megváltoztatására szolgál. Meg fog tanulni ebből a cikkből.

Van egy képünk. Azt akarjuk, hogy amikor az egérkurzort áthelyezi rajta, megváltozik. Továbbá azt szeretnénk, hogy a piros keret a kép körül újra megjelenjen.

A HTML kód nagyon egyszerű:

img background: url ("image_1.jpg") nem-ismétlés; // Az alapértelmezett képet helyettesíti
magasság: 100px; // A kép magassága
szélesség: 100px; // Kép szélessége
>
.img: lebegő háttér: url ("image_2.jpg") nem-ismétlés; // Helyezze azt a képet, amely az egérmutatót lenyomva tartja
határ: 2px szilárd # f00; // Állítsa be a piros szegélyt
magasság: 120px; // Az új kép magassága
szélesség: 120px; // Az új kép szélessége
>

Az újszülöttek fő hibája a szélesség és a magasság tulajdonságainak hiánya. Ezek nélkül az üres div nem jelenik meg egyszerűen, ezért ne felejtsük el, hogy közvetlenül meg kell adnia a szélességet és magasságot, és meg kell egyeznie a blokkhoz csatolt kép szélességével és magasságával.

A page.html egy példa az oldal címére, lehet index.html, about.html vagy page_1.html. Le kell cserélned a neveddel, akkor nem lesz 404.

Hogy nem tudtam volna kitalálni? Köszönöm a tudományt. Továbbra is tanulmányozom a tanfolyamodat "Webhely létrehozása az A-tól Z-ig" Az ön válaszadása és az önként való hajlandóság különös tiszteletet kelt.

Az "a" blokk elemet állíthat be, a kijelző: blokk; Ezután állítsa be a hátteret, mint kép, a: lebegő háttér beállítása másik.

Kérjük, ellenőrizze a kódomat) Nos, a rendszer ilyen, a KSS kiterjesztésével létrehozott fájlt hozta létre, amely a fejléc linkjén keresztül mutatott linkre mutatott rá a képeket ábrázolták, hogy jelöljék meg a magasság szélességét, mint a képen, de

csak ne rabolni) a címkén, ha beilleszem, akkor van egy kép, a másik nem mutatja a divot

Ismét és itt hiba lehet a hrefben. Használja a firebug-ot.

Tökéletesen utal a kórusra, ha a kód így néz ki

, akkor egy másik kép csak akkor kezd dolgozni), és nem értem, hogyan kell megjeleníteni ezt az üres divot, ami működni fog, különben nem jelenik meg, azaz nem jelenik meg. minden jól működik Nem tudom a kereteket beállítani. img .img: lebeg és mint a jelzett szabályok, vagy sem?

A helyek nem használhatók a képnevekben. És az út, ha a stíluslap nem ugyanabban a könyvtárban található, mint a kép, teljesen másnak kell lennie.

Michael, kérlek, kérlek. Egész nap harcolok ezen a változáson a menüben, de semmi sem jön ki. Íme egy példa:

itt vannak a stílusok: #menu #menu p #menu a #menu a: lebeg (h.jpg) látom, és (m.jpg) nem jelenik meg az egér mozgatásakor.

Talán a kép elérési útja helytelen. És nem világos, miért kell megadnia a p háttérét, majd a: lebegéshez, meg kell adnia mind ott, mind ott

, vagy .

Az útvonal helyes. Többször ellenőrzött. Az utóbbi időben, bizonyos esetekben, a fájl helyét jelezte a Dreamweaver helyi menüjében. Megadja a hátteret, és csak a P: #menu p<>. #menu p: lebeg<>, és csak az A: #menu a<>. #menu a: lebeg<>, nincs változás.

megtalálta a választ: hiba csak egy üresen #menu p: lebeg. Fix #menu p: ugrás és minden dolgozott

Kapcsolódó cikkek