Salutare dragi cititori ai blogului webcodius! Primesc adesea întrebări: cum să faci o imagine pe o pagină web să se schimbe atunci când treci cu cursorul mouse-ului peste ea. Acest efect se găsește pe multe site-uri și cel mai simplu exemplu este atunci când treci cu mouse-ul peste un buton, iar după aceea își schimbă culoarea. Uneori, JavaScript este folosit pentru a crea acest efect, dar de obicei doar CSS este suficient, mai ales după introducerea celei de-a treia versiuni CSS. Mai târziu în articol, o voi face cum să schimbi imaginea la hover cu un singur CSS, voi analiza mai multe moduri și efecte diferite.

Efectele schimbării unui element de pagină web la trecerea cursorului sunt adesea denumite ca efecte de hover. Acest lucru se datorează faptului că la implementarea unor astfel de efecte se folosește, ceea ce determină stilul elementului atunci când cursorul mouse-ului este plasat peste el.

Pentru început, să luăm în considerare o opțiune mai simplă. Să presupunem că aveți o imagine inserată în pagină, așa cum se arată mai jos:

Și să presupunem că trebuie să-i schimbați afișarea atunci când treceți cu mouse-ul peste el cu cursorul mouse-ului. Când lipiți această imagine în etichetă img adăugați atributul class="animate1" , apoi codul html al imaginii va arăta cam așa:

Pentru început, puteți trece pur și simplu cursorul pentru a face imaginea transparentă. Transparența în CSS este gestionată de proprietatea opacitate, care este o proprietate CSS3. Ca valoare, se folosesc numere fracționale de la 0 la 1, unde zero corespunde transparenței depline, iar unu, dimpotrivă, opacității obiectului. Pentru versiuni mai vechi Internet Explorer va trebui să utilizați proprietatea de filtru cu alpha(Opacity=X), deoarece nu acceptă proprietatea de opacitate. În loc de X, va trebui să înlocuiți un număr de la 0 la 100, unde 0 înseamnă transparență totală, iar 100 înseamnă opacitate totală.

Apoi, pentru a face imaginea transparentă atunci când treceți cu mouse-ul în fișierul de stil sau între etichete Și html, adăugați următorul cod css:

În cazul în care nu sunteți familiarizat cu CSS, vă voi explica că intrarea img.animate1:hover spune browserului că pentru toate elementele , cu un atribut de clasă egal cu animate1, când treceți cu cursorul mouse-ului peste ele, aplicați stilurile specificate. Și stilurile sunt specificate între acolade ( și ). Dacă totul este făcut corect, ar trebui să arate cam așa:

Puteți face o poză înăuntru starea originară translucid și, atunci când treceți cu mouse-ul deasupra, faceți-l netransparent. Apoi trebuie să adăugați următoarele linii în fișierul CSS:

img.animate1(
filtru: alfa (Opacitate=25);
opacitate: 0,25
}
img.animate1:hover(

opacitate: 1
}

Rezultatul va fi astfel:

Pentru un efect mai mare, puteți încetini schimbările în transparența imaginii. Pentru a face acest lucru, puteți utiliza proprietatea de tranziție CSS, care stabilește efectul de tranziție între două stări ale unui element. De exemplu, să adăugăm o secundă de încetinire. Apoi codul nostru CSS va arăta astfel:

img.animate1(
filtru: alfa (Opacitate=25);
opacitate: 0,25
-moz-tranziție: toate cele 1 ease-in-out; /* efect de tranziție pentru Firefox înainte de versiunea 16.0 */
-webkit-tranziție: toate cele 1 ease-in-out; /* efect de tranziție pentru Chrome până la versiunea 26.0, Safari, Android și iOS */
-o-tranziție: toate cele 1 ease-in-out; /* efect de tranziție pentru Opera înainte de versiunea 12.10 */
tranziție: toate cele 1 ease-in-out; /* efect de tranziție pentru alte browsere */
}
img.animate1:hover(
filtru: alfa (Opacitate=100);
opacitate: 1
}

Rezultat:

Folosind proprietatea de transformare, imaginea poate fi scalată, rotită, deplasată, înclinată. Să încercăm să mărim imaginea. Atunci codul css va fi astfel:

img.animate1(


- o-tranziție: toate 1-urile ușurință;
tranziție: toate 1s ușurință;
}
img.animate1:hover(
- moz-transform: scara (1,5); /* efect de transformare pentru Firefox înainte de versiunea 16.0 */
- webkit-transform: scară (1,5); /* efect de transformare pentru Chrome până la versiunea 26.0, Safari, Android și iOS */
- o-transformă: scară (1,5); /* efect de transformare pentru Opera înainte de versiunea 12.10 */
- ms-transform: scară (1,5); /* efect de transformare pentru IE 9.0 */
transform:scale(1,5); /* efect de transformare pentru alte browsere */
}

Și rezultatul va fi așa:

Rotirea poate fi adăugată pentru a mări imaginea. Apoi stilurile CSS se schimbă puțin:

img.animate1(
moz-tranziție: toate 1s ease;
webkit-tranziție: toate 1s ușurință;
- o-tranziție: toate 1-urile ușurință;
tranziție: toate 1s ușurință;
}
img.animate1:hover(
- moz-transform: rotire (360deg) scară (1,5);
- webkit-transform: rotire (360deg) scară (1,5);
- o-transformă: rotire (360deg) scară (1,5);
- ms-transform: rotire (360deg) scară (1,5);
transformare: rotire(360deg) scară(1,5);
}

Rezultat:

Mai sus, am luat în considerare cazurile în care o imagine este implicată în animație. Apoi, luați în considerare cum să înlocuiți o imagine cu alta. În acest caz, de obicei sunt pregătite două imagini de aceeași dimensiune: una pentru vizualizarea originală, cealaltă pentru înlocuirea acesteia.

Să presupunem că avem două imagini, una alb-negru și cealaltă color:

Să facem astfel încât atunci când treceți cu mouse-ul peste o imagine alb-negru, să fie afișată o imagine color. Pentru a face acest lucru, vom face din imaginea originală fundalul elementului div folosind proprietatea de fundal. Și când treceți cu mouse-ul peste imaginea cursorului, ne vom schimba imagine de fundal folosind aceeași pseudo-clasă și proprietate de fundal. Pentru a implementa acest efect asupra pagina html adăugați un element div cu clasa rotate1:

Și adăugați următoarele descrieri de stil:

div.rotate1(
fundal: url (img/2.jpg); /* Calea către fișierul cu imaginea originală */
latime: 480px /* Lățimea imaginii */
înălțime: 360px; /* Înălțimea imaginii */
}
div.rotate1:hover(
fundal: url (img/1.jpg); /* Calea către fișierul cu imaginea înlocuită */
}

Iar rezultatul:

Această metodă are un dezavantaj semnificativ. Deoarece a doua imagine este încărcată numai atunci când cursorul este plasat, atunci dacă utilizatorul are o conexiune lentă la Internet și dimensiunea fișierului cu imaginea este marime mare, imaginea va fi afișată cu o pauză. Prin urmare, mai jos vom lua în considerare câteva modalități suplimentare de a înlocui imaginile atunci când trecem cursorul mouse-ului.

Următoarea metodă se va baza pe combinarea a două imagini într-un singur fișier. Să presupunem că trebuie să plasăm un buton pe pagină, care, atunci când cursorul mouse-ului este plasat peste el, și-ar schimba aspectul. Pentru a face acest lucru, combinăm două imagini într-un singur fișier, iar imaginea rezultată va arăta cam așa:

În acest caz, schimbarea de la o imagine la alta se va face prin deplasarea verticală a imaginii de fundal folosind proprietatea background-position. Deoarece atunci când faceți clic pe buton, de obicei mergeți pe o altă pagină, vom introduce imaginea în element< a>. Apoi lipiți următorul cod în pagina html:

Și într-un fișier css ca acesta:

a.rotate2(
fundal: url (img/button.png); /* Calea către fișierul cu imaginea originală */
display:bloc; /* Link ca element de bloc */
latime: 50px /* Lățimea imaginii în pixeli */
înălțime: 30px; /* Înălțimea imaginii */
}
a.rotate2:hover(
fundal-poziție: 0-30px; /* Decalaj fundal */
}

Rezultat:

Și ultima modalitate pentru astăzi este atunci când o imagine este plasată sub alta cu css poziție: reguli absolute. În acest caz, punem două imagini în interiorul containerului div:

Și adăugați stiluri CSS:

Animate2(
poziție:rudă;
margin:0 auto;/* setează blocul div în centrul paginii*/
lățime: 480px; /* Latime */
înălțime: 360px; /* Înălțime */
}
.animate2 img(
poziție: absolut; /* pozitionare absoluta */
stânga: 0; /* aliniază imaginile în colțul din stânga sus al div-ului */
sus: 0; /* aliniază imaginile în colțul din stânga sus al div-ului */
}

După adăugare regulile css, pozele vor fi plasate una sub alta. Acum, controlând transparența imaginilor folosind proprietatea opacitate, vom afișa a doua imagine în stare normală și prima când cursorul este plasat peste. Pentru a face acest lucru, în stare normală, facem imaginea cu prima clasă complet transparentă, iar când treceți cursorul, opusul este adevărat: imaginea cu clasa a doua va fi complet transparentă, iar cu prima clasă va fi complet transparentă. nu fi transparent:

Animate2 img.first ( /* prima imagine este complet transparentă */
opacitate:0;
filtru:alfa (opacitate=0);
}
.animate2:hover img.first ( /* prima imagine devine opaca la trecerea cu mouse-ul */
opacitate:1;
filtru:alfa (opacitate=100);
}
/* iar al doilea devine transparent la hover */
opacitate:0;
filtru:alfa (opacitate=0);
}

Rezultat:

Puteți obține o tranziție lină adăugând proprietatea de tranziție CSS la ultima regulă:

Animate2:hover img.second, .animate2 img.second:hover (
opacitate:0;
filtru:alfa (opacitate=0);
-moz-tranziție: toate cele 2 ușurință;
-webkit-tranziție: ușurința tuturor celor 2;
-o-tranziție: toate cele 2 ușurință;
tranziție: toate cele 2 ușurință;
}

Iar rezultatul:

Și dacă adăugăm proprietatea transform:

Animate2:hover img.second, .animate2 img.second:hover (
opacitate:0;
filtru:alfa (opacitate=0);
-moz-transform:scale(0, 1);
-webkit-transform:scale(0, 1);
-o-transform:scale(0, 1);
-ms-transform:scale(0, 1);
transform:scale(0, 1); /* reduce lățimea imaginii la 0 */
}

Se va dovedi astfel:

Prin combinarea diferitelor proprietăți CSS, puteți obține diferite efecte de hover atunci când schimbați imaginile în timp ce treceți cu mouse-ul. Am postat acestea și alte exemple pe această pagină, de unde puteți descărca și codul sursă. Atât, până ne întâlnim din nou.

Soluţie
Pentru a face tabelul mai ușor de citit, puteți schimba culoarea rândului când treceți cu mouse-ul peste acesta - acest lucru va evidenția conținutul. Acest efect este prezentat în orez. 5.10.

Orez. 5.10

Implementarea este destul de simplă, trebuie doar să adăugați următoarea regulă în foaia de stil:

Discuţie
Un astfel de document va fi afișat corect în toate browsere moderne, inclusiv Internet Explorer 7, dar cu excepția Internet Explorer 6. Cu toate acestea, dacă datele din tabel sunt prezentate logic și totul
clar și fără evidențiere de fundal, atunci acest efect poate fi considerat un plus frumos, dar nu obligatoriu - fără de care ar fi imposibil să utilizați site-ul.

Dacă dintr-un motiv oarecare trebuie neapărat să implementați această funcție pentru utilizatorii Internet Explorer 6, puteți adăuga un script JavaScript simplu. Pentru a schimba culoarea de fundal a unui rând de tabel atunci când treceți cu mouse-ul peste acesta în Internet Explorer 6, trebuie să setați proprietățile necesare pentru o clasă CSS (o voi numi hilite în acest exemplu).

După tabel, adăugați următorul cod JavaScript în pagină:

Acest script caută toate etichetele în document și oferind fiecăruia dintre ei un handler de evenimente mouseover și mouseout.
Ei atribuie clasa CSS hilite rândurilor când cursorul mouse-ului este peste ea și o elimină când este mutat în altă zonă. După cum se vede pe orez. 5.11, această combinație de CSS și JavaScript produce rezultatul dorit.

Acest script JavaScript setează în mod dinamic clasa CSS pentru etichetă. În acest caz, adăugăm clasa hilite la etichetă pe evenimentul mouseover, pentru care este utilizată proprietatea onmouseover:

Orez. 5.11

După ce apare evenimentul mouseout, eliminăm clasa:

Schimbând numele unei clase de elemente ca răspuns la acțiunile utilizatorului folosind JavaScript, puteți obține o varietate de efecte atractive și discrete. Această tehnică poate fi folosită, de exemplu, pentru a evidenția o anumită zonă prin schimbarea numelui clasei elementului div corespunzător la evenimentul mouseover.

Notă
JavaScript discret. Poate ați observat că codul JavaScript nu a fost adăugat în tabelul în sine; întregul script a fost plasat numai în interiorul elementului script. Această tehnică se numește JavaScript discret; scopul său este să separe documentele și scripturile, la fel cum separăm foile de stil în cascadă și markup.

Scriptul JavaScript trebuie rulat după încărcarea tabelului, deoarece înainte de aceasta nu există nici un obiect în sine pe care să fie executat scriptul. Alternativ, puteți scrie o funcție care va fi executată când pagina s-a terminat de încărcat; în acest caz, codul JavaScript poate fi stocat în dosar separat, specificând un link către acesta în codul paginii. În plus, pentru a vă asigura că scriptul este încărcat numai atunci când pagina este deschisă în motor de cautare Explorer 6, puteți folosi comentarii condiționate.

Vom vorbi mai multe despre acest lucru în secțiunea „Definirea diferitelor stiluri pentru Internet Explorer 6 și 7” din capitolul 7.

Ca și în exemplul anterior, în acest caz, utilizarea diferitelor biblioteci, cum ar fi jQuery, poate fi utilă atunci când suportul pentru anumite proprietăți în browserele mai vechi nu este disponibil.

În acest articol, un exemplu arată cum să faci o schimbare de culoare pe un element arbitrar al site-ului dacă cursorul mouse-ului a fost plasat peste acesta.

Acest „lucru” se face folosind stiluri css, adică va trebui să adăugați câteva rânduri de text la fișierul de stil șablon, precum și să vă arătați abilitățile de proiectare. Îți voi arăta ce să adaugi.

Actualizat la 17.01.2019

Atenţie! Am lansat o nouă temă Romb pentru articolele și blogurile dvs. Cel mai rapid de pe Google PageSpeed ​​​​și optimizare maximă pentru SEO.

Să dăm doar un exemplu pentru claritate, ca să înțelegeți despre ce vorbim. Deplasați mouse-ul peste elementele de meniu:

De îndată ce mouse-ul este trecut peste orice câmp din listă, fundalul liniei se modifică, precum și culoarea textului/linkului din titlul titlului site-ului.

Iată cum arată codul de bloc:

XHTML

În exemplul meu, vedem că efectul funcționează pe o legătură obișnuită. În schimb, poate fi un container