Cum de a schimba imaginea pe mouseover
Sunteți aici: Pagina principală - CSS - Bazele CSS - Cum de a schimba imaginea pe mouseover
Cred că te întâlnesc de multe ori la diverse site-uri, atunci când mutați mouse-ul peste orice imagine, și-a schimbat. Cel mai simplu exemplu - un cursorul mouse-ului pe butonul. Să presupunem, apoi și-a schimbat culoarea, așa cum au fost, după ce devin active. Iată cum puteți schimba imaginea de pe mouseover. Vei învăța de la acest articol.
Avem o imagine. Dorim să atunci când treceți cursorul mouse-ului pe ea, ea sa schimbat. Mai mult decât atât, dorim să facem mai mult cadru roșu apare în jurul imaginii.
HTML-cod este foarte simplu:
img background: url ( "image_1.jpg") fără repetare; // Înlocuiți imaginea implicită
height: 100px; // Înălțimea imaginii
lățime: 100px; // Lățimea imaginii
>
.img: hover background: url ( "image_2.jpg") fără repetare; // Înlocuiți imaginea să fie pe mouseover
frontieră: 2px solid # f00; // Setați cadrul roșu
height: 120px; // Înălțimea noii imagini
lățime: 120px; // Lățimea noii imagini
>
Cheie incepatori greseala este lipsa de lățimea și înălțimea. Fără ele, goliți div pur și simplu nu apare, așa că nu uitați că aveți nevoie pentru a indica lățimea și înălțimea în mod direct, iar acestea trebuie să fie aceeași lățime și înălțime, podtsavlyaete unitate.
pagină.html - este un exemplu de numele paginii, aveți poate fi index.html, about.html sau page_1.html. Ar trebui să-l înlocuiască pe numele său, atunci va fi 404.
Nu cred! Vă mulțumesc pentru lecție. Voi continua să studieze cursul „Crearea unui site de la A la Z“, capacitatea de reacție și dorința de a ajuta este un respect deosebit dumneavoastră.
Puteți face "un" element de bloc, display: block; Și apoi cere-i ca imagine de fundal, atunci când o: fundal planare pentru a pune alta.
Vă rugăm să verificați codul meu) Ei bine, schema este creat cu extensia de fișier css indicat să-l drumul prin link-ul din Hede Fotografii popridumyval au o lățime în înălțimea imaginii, dar
divelor pur și simplu nu Robit) în tag-ul în cazul în care insertul că, deși există o imagine, pe de altă parte nu este afișatDin nou, și poate exista un bug în href. Utilizați Firebug.
Perfect hrif se referă în cazul în care codul arata ca acest lucru
, apoi începe să curgă numai obturează o altă imagine) și eu nu înțeleg cum de a afișa div gol care ar funcționa, sau nu apare, adică, totul funcționează bine eu nu pot seta domeniul de aplicare a valorilor normale. imgSpațiile nu pot fi utilizate în numele imaginii. Și modul în care, în cazul în care fișierul stil nu este în același director ca imagine, trebuie să fie destul de diferit.
Michael, spune-mi, te rog. Toată ziua în care am lupta peste această schimbare a imaginii în meniu, dar nimic nu iese. Iată un exemplu:
Aici stiluri: #menuPoate calea către imaginea nu este validă. Și totuși, nu este clar ce punct de fundal în p, și apoi au o: hover, este necesar să se precizeze și acolo, și acolo
, sau .
Calea este corectă. Am verificat de mai multe ori. Ultima dată că are cu siguranță au locația fișierului prin intermediul Dreamweaver meniul contextual. A subliniat fundal și numai P: #menu p<>. #menu p: hover<>, și numai A: #menu un<>. #menu a: hover<>, Nu există modificări.
Am găsit răspunsul: doar o singură greșeală #menu p spațiu gol: hover. Am fixat pe #menu p: Hover, și a lucrat