Sunteți aici: Pagina principală - CSS - CSS Basics - Cum să modificați imaginea când plasați mouse-ul peste mouse
Cred că te-ai întâlnit adesea pe diverse site-uri atunci când ai îndreptat o imagine cu un șoarece și sa schimbat. Cel mai simplu exemplu este plasarea mouse-ului peste buton. Să presupunem că după aceea a schimbat culoarea, ca și cum ar fi activă. Iată cum puteți modifica imaginea atunci când plasați cursorul pe mouse. Veți învăța din acest articol.
Avem o fotografie. Vrem ca atunci când mutați cursorul mouse-ului peste el, se schimbă. Mai mult, dorim să apară din nou cadrul roșu din jurul imaginii.
Codul HTML este foarte simplu:
img fundal: url ("image_1.jpg") no-repeat; // Înlocuiți imaginea implicită
înălțime: 100px; // Înălțimea imaginii
lățime: 100px; // Lățime imagine
>
.img: fundal hover: url ("image_2.jpg") no-repeat; // Înlocuiți acea imagine, care va fi atunci când plasați cursorul mouse-ului
frontieră: 2px solid # f00; // Setați marginea roșie
înălțime: 120px; // Înălțimea imaginii noi
lățime: 120px; // Lățimea imaginii noi
>
Greșeala principală a începătorilor este lipsa proprietăților de lățime și înălțime. Fără acestea, un div div nu este afișat, deci nu uitați că trebuie să specificați în mod direct lățimea și înălțimea și trebuie să corespundă lățimii și înălțimii imaginii pe care o atașați la bloc.
page.html este un exemplu de titlu al paginii, îl puteți avea index.html, about.html sau page_1.html. Trebuie să o înlocuiți cu numele dvs., atunci nu va mai fi 404.
Cum n-aș fi putut ghici! Mulțumesc pentru știință. Voi continua să vă studiez cursul "Crearea unui site de la A la Z" Responsabilitatea și dorința dvs. de a ajuta provoacă un respect special.
Puteți face "a" un element de bloc, afișaj: bloc; Apoi, setați fundalul în imagine ca imagine, cu un fundal hover stabilit altul.
Verificați codul meu) Ei bine, schema astfel a creat un fișier cu o extensie a KSS indicat printr-un link printr-un link în antet imaginile au fost reprezentate grafic pentru a indica lățimea înălțimii ca în imagine, dar
doar nu te jefui) în etichetă dacă introduc că atunci există o imagine, cealaltă nu arată divDin nou și aici, poate exista o greșeală în href. Utilizați firebug.
Perfect se referă la cor, dacă codul arată astfel
, atunci o altă imagine începe să funcționeze numai) și nu înțeleg cum să afișez acest div div care ar funcționa, altfel nu va fi afișat, adică totul funcționează bine Nu pot seta cadre bine. imgSpațiile nu pot fi utilizate în numele imaginilor. Iar calea, dacă foaia de stil nu se află în același director ca imaginea, ar trebui să fie complet diferită.
Michael, spune-mi, vă rog. Întreaga zi mă lupt pentru această schimbare a imaginii în meniu, dar nimic nu iese. Iată un exemplu:
aici sunt stilurile: #menuPoate că calea spre imagine este incorectă. Și nu este clar de ce trebuie să specificați fundalul pentru p, iar apoi pentru: hover, trebuie să specificați atât acolo, cât și acolo
, sau .
Calea este corectă. Verificat de mai multe ori. Ultima dată, deja sigur, a indicat locația fișierului prin meniul contextual al Dreamweaver. Specifică fundalul și numai pentru P: #menu p<>. #menu p: hover<>, și numai pentru A: #menu a<>. #menu a: hover<>, nu există nicio schimbare.
a găsit răspunsul: o greșeală într-o singură martor #menu p: hover. Fixed #menu p: hover și totul a funcționat
Articole similare
Trimiteți-le prietenilor: