Promjena boje pri lebdenju css-a. Jednostavna promjena tona boje

Kako bih rekao pregledniku da učinak treba izvršiti na određenim vezama, ovdje sam ih stavio u zasebne veze. Za vas to također može biti spremnik koji ste izradili ili već gotov (na primjer, widget na bočnoj traci).

Sada morate postaviti radnju lebdenja mišem. Kao što je gore spomenuto, sve radimo koristeći CSS stilove (datoteka predloška može se zvati style.css, css.css, core.css ili nekako drugačije).

Catside a:hover (pozadina: #0078BF; boja: #fff;)

Ovom linijom rekli smo pregledniku da promijeni boju pozadine kada mišem prijeđemo iznad plave (#0078BF) i rekli da boja fonta treba postati bijela (#fff). Sama "stvar" koja omogućuje pregledniku da shvati da to treba učiniti lebdenjem miša je pseudoklasa lebdenja (o njoj možete pročitati

Pozdrav dragi čitatelji bloga webcodius! Često dobivam pitanja: kako promijeniti sliku na web stranici kada prijeđete pokazivačem miša preko nje. Ovaj se efekt nalazi na mnogim stranicama, a najjednostavniji primjer je kada prijeđete pokazivačem iznad gumba i on tada promijeni boju. Ponekad se JavaScript koristi za stvaranje ovog efekta, ali obično je dovoljan sam CSS, posebno od izdanja CSS verzije 3. Kasnije u članku ću vam reći kako promijeniti sliku kada lebdite mišem koristeći samo jedan CSS, razmotrit ću nekoliko metoda i različite efekte.

Učinci promjene elementa web-stranice kada se mišem lebdi često se nazivaju efekti lebdenja. To je zbog činjenice da se pri implementaciji takvih efekata koristi, što određuje stil elementa kada kursor miša lebdi iznad njega.

Prvo, pogledajmo jednostavniju opciju. Recimo da imate sliku umetnutu na svoju stranicu, kao što je prikazano u nastavku:

I recimo da morate promijeniti njegov prikaz kada postavite kursor miša iznad njega. Kada zalijepite ovu sliku na img oznaka Dodajmo atribut class="animate1", tada će html kod slike izgledati otprilike ovako:

Za početak, sliku možete jednostavno učiniti prozirnom kada zadržite kursor. Transparentnost u CSS-u kontrolira se svojstvom neprozirnosti, koje je specifično za CSS3. Koristi se vrijednost razlomački brojevi od 0 do 1, gdje nula odgovara potpunoj prozirnosti, a jedan, naprotiv, odgovara neprozirnosti objekta. Za stare ljude Internetske verzije Explorer će morati koristiti svojstvo filtra s vrijednošću alpha(Opacity=X) budući da ne podržava svojstvo neprozirnosti. Umjesto X morat ćete zamijeniti broj od 0 do 100, gdje 0 znači puna transparentnost, a 100 je puna neprozirnost.

Zatim, kako bi slika bila prozirna kada prijeđete pokazivačem preko stilske datoteke ili između oznaka i html datoteke, trebate dodati sljedeći css kod:

img.animate1:hover (
filter: alpha (Opacity=25);/* transparentnost za IE */
neprozirnost: 0,25;/* transparentnost za druge preglednike */
}

U slučaju da ne razumijete CSS, unos img.animate1:hover govori pregledniku da za sve elemente , koji imaju atribut klase jednak animate1 kada iznad njih lebdite pokazivačem miša, primijeniti navedenim stilovima. A stilovi su naznačeni između vitičaste zagrade( I ). Ako ste sve napravili kako treba, trebalo bi izgledati otprilike ovako:

Možete se slikati unutra izvorno stanje proziran, a prilikom lebdenja kursora neka bude neproziran. Zatim trebate dodati sljedeće retke u CSS datoteku:

img.animate1 (
filter: alfa (Opacity=25);
neprozirnost: 0,25;
}
img.animate1:hover (

neprozirnost: 1;
}

Rezultat će biti ovakav:

Za veći učinak možete usporiti promjene u prozirnosti slike. Da biste to učinili, možete koristiti CSS svojstvo prijelaza, koje postavlja učinak prijelaza između dva stanja elementa. Dodajmo jednu sekundu usporavanja kao primjer. Tada će naš CSS kod izgledati ovako:

img.animate1 (
filter: alfa (Opacity=25);
neprozirnost: 0,25;
-moz-prijelaz: sve 1s lakoća ulaska; /* efekt prijelaza za Firefox do verzije 16.0 */
-webkit-transition: sve 1s lakoća ulaska; /* efekt prijelaza za Chrome do verzije 26.0, Safari, Android i iOS */
-o-prijelaz: sve 1s lakoća u-van; /* efekt prijelaza za Operu do verzije 12.10 */
prijelaz: sve 1s lagano-u-van; /* efekt prijelaza za druge preglednike */
}
img.animate1:hover (
filter: alfa (Opacity=100);
neprozirnost: 1;
}

Proizlaziti:

Pomoću transformirati svojstva Slika se može skalirati, rotirati, pomicati, naginjati. Pokušajmo povećati sliku. Tada će css kod biti ovakav:

img.animate1(


— o-prijelaz: sve 1s lakoća;
prijelaz: sve 1s lakoća;
}
img.animate1:hover(
- moz-transformacija: skala (1,5); /* efekt transformacije za Firefox do verzije 16.0 */
- webkit-transform: skala (1,5); /* transformacijski učinak za Chrome prije verzije 26.0, Safari, Android i iOS */
- o-transformacija: skala (1,5); /* efekt transformacije za Operu do verzije 12.10 */
— ms-transformacija: skala (1,5); /* učinak transformacije za IE 9.0 */
transformacija:razmjer(1.5); /* učinak transformacije za druge preglednike */
}

A rezultat će biti ovakav:

Možete dodati rotaciju za povećanje slike. Zatim css stilovi promijeni malo:

img.animate1(
— moz-prijelaz: sve 1s lakoća;
— webkit-transition: all 1s jednostavnost;
— o-prijelaz: sve 1s lakoća;
prijelaz: sve 1s lakoća;
}
img.animate1:hover(
- moz-transformacija: rotacija (360deg) skala (1.5);
- webkit-transform: rotacija (360 stupnjeva) skala (1,5);
- o-transformacija: rotacija (360 stupnjeva) skala (1,5);
- ms-transformacija: rotacija (360 stupnjeva) skala (1,5);
transformacija: rotacija (360 stupnjeva) skala (1,5);
}

Proizlaziti:

Gore smo pogledali slučajeve kada je jedna slika uključena u animaciju. Zatim ćemo pogledati načine za zamjenu jedne slike drugom. U tom slučaju obično se pripremaju dvije slike iste veličine: jedna za izvorni oblik, drugi da ga zamijeni.

Recimo da imamo dvije slike, jednu crno-bijelu i drugu u boji:

Učinimo to tako da kada zadržite kursor iznad crno-bijela slika bio prikazan u boji. Da biste to učinili, napravite izvornu sliku kao pozadinu div elementa pomoću svojstva pozadine. A kada kursorom prijeđete preko slike, promijenit ćemo se pozadinska slika koristeći istu lebdeću pseudoklasu i svojstvo pozadine. Da bi se ostvario ovaj učinak na html stranica dodati div element s klasom rotate1:

I dodajte sljedeće opise stilova:

div.rotate1(
pozadina: url (img/2.jpg); /* Put do datoteke s izvornom slikom */
širina: 480px; /* Širina slike */
visina: 360px; /* Visina slike */
}
div.rotate1:hover (
pozadina: url (img/1.jpg); /* Put do datoteke sa slikom koju treba zamijeniti */
}

I rezultat:

Ova metoda ima jedan značajan nedostatak. Budući da se druga slika učitava samo kada se kursor zadrži, ako korisnik ima spor internet, a veličina datoteke slike je velika veličina, slika će se prikazati s određenom stankom. Stoga ćemo u nastavku razmotriti još nekoliko načina zamjene slika kada lebdite kursorom miša.

Sljedeća metoda temeljit će se na kombiniranju dviju slika u jednu datoteku. Recimo da na stranicu trebamo postaviti gumb koji, kada kursor miša prijeđe iznad njega, mijenja svoj izgled. Da biste to učinili, spojite dvije slike u jednu datoteku i rezultirajuća slika će izgledati otprilike ovako:

U ovom slučaju, promjena s jednog uzorka na drugi bit će učinjena pomakom pozadinska slika okomito pomoću svojstva pozadinskog položaja. Budući da klik na gumb obično vodi na drugu stranicu, umetnut ćemo sliku u element< a>. Zatim umetnite sljedeći kod u html stranicu:

A css datoteka je ovakva:

a.rotate2 (
pozadina: url (img/button.png); /* Put do datoteke s izvornom slikom */
prikaz: blok; /* Veza kao blok element */
širina: 50px; /* Širina slike u pikselima */
visina: 30px; /* Visina slike */
}
a.rotate2:hover (
položaj pozadine: 0 -30px; /* Pozadinski pomak */
}

Proizlaziti:

I zadnja metoda za danas je kada se jedna slika postavi ispod druge koristeći CSS pravilo position: absolute. U ovom slučaju postavljamo dvije slike u div spremnik:

I dodajte CSS stilove:

Animate2(
položaj: relativno;
margin:0 auto;/* set div blok centrirano na stranici*/
širina:480px; /* Širina */
visina: 360px; /* Visina */
}
.animate2 img (
pozicija: apsolutna; /* apsolutno pozicioniranje*/
lijevo: 0; /* poravnajte slike ulijevo gornji kut div*/
vrh: 0; /* poravnajte slike gore lijevo kut div */
}

Nakon dodavanja css pravila, slike će biti postavljene jedna ispod druge. Sada, kontroliranje transparentnosti slika pomoću svojstva neprozirnosti u normalnom stanju prikazat ćemo drugu sliku, a kada zadržite pokazivač, prvu. Da bismo to učinili, u normalnom stanju sliku s prvom klasom činimo potpuno prozirnom, a kada zadržite kursor, obrnuto: slika s drugom klasom bit će potpuno prozirna, ali s prvom klasom neće biti prozirna :

Animate2 img.first ( /* prva slika je potpuno prozirna */
neprozirnost:0;
filter:alpha (neprozirnost=0);
}
.animate2:hover img.first ( /* kada lebdite kursorom, prva slika postaje neprozirna */
neprozirnost:1;
filter:alfa (neprozirnost=100);
}
/* a drugi postaje proziran kada zadržite kursor */
neprozirnost:0;
filter:alpha (neprozirnost=0);
}

Proizlaziti:

Glatki prijelaz možete postići dodavanjem svojstva CSS prijelaza posljednjem pravilu:

Animate2:hover img.second, .animate2 img.second:hover (
neprozirnost:0;
filter:alpha (neprozirnost=0);
-moz-prijelaz: sve 2s lakoća;
-webkit-transition: sve 2s jednostavnost;
-o-prijelaz: sve 2s lakoća;
prijelaz: sve 2s lakoća;
}

I rezultat:

A ako dodate svojstvo transformacije:

Animate2:hover img.second, .animate2 img.second:hover (
neprozirnost:0;
filter:alpha (neprozirnost=0);
-moz-transformacija:razmjer(0, 1);
-webkit-transform:scale(0, 1);
-o-transformacija:razmjer(0, 1);
-ms-transformacija:razmjer (0, 1);
transformacija:razmjer(0, 1); /* smanji širinu slike na 0 */
}

Ispast će ovako:

Kombiniranje razni CSS Svojstva se mogu postići na različite načine efekti lebdjenja kada mijenjate slike dok lebdite kursorom miša. Ove i druge primjere stavio sam na ovu stranicu, gdje također možete preuzeti izvore. To je sve, vidimo se opet.

Korištenje i upravljanje stilovima sa koristeći JavaScript omogućuje promjenu izgleda ćelije u hodu, kada su ispunjeni određeni uvjeti, kao što je lebdenje pokazivača iznad veze ili same ćelije.

Razmotrimo najjednostavniju tehniku ​​- boja pozadine ćelije se mijenja kada kursor miša lebdi iznad nje.

Lebdenje miša iznad područja prati događaj onMouseOver, a pomicanje miša izvan njega prati događaj onMouseOut. Budući da se boja pozadine mijenja za istu ćeliju preko koje prelazimo pokazivačem, promjena stila se vrši pomoću metode this.style.background.

Primjer koristi promjenu siva pozadina u narančastu U pregledniku Netscape 4.x gornja metoda ne radi.

Također možete napraviti prijelaz na drugi dokument klikom ne na samu vezu, već na ćeliju tablice. Tada će se cijela ćelija pretvoriti u jednu vezu, a ne samo tekst unutar nje. Valja napomenuti da ovaj pristup nije najbolji, jer zbog svoje neočiglednosti posjetitelji web stranica su navikli da se kursor miša pretvara u ruku kada prijeđu iznad linka. Izgled pokazivača miša možete nadjačati pomoću CSS-a, ali ta je značajka dostupna samo u pregledniku Internet Explorer.

Da bi se boja ćelije promijenila samo kada prijeđete pokazivačem miša iznad veze unutar nje, svojstvima ćelije biste trebali pristupiti kroz njezino ime. Kako bi program znao koja svojstva ćelije treba promijeniti, koristi se ID parametar, koji jedinstveno identificira element.

Radi praktičnosti, promjena boje ćelije predstavljena je kao zasebne funkcije. Zbog Internet preglednici Koristite Explorer, Netscape i Opera različiti pristupi Za dinamičku promjenu stila elementa, u funkcijama prikazanim u primjeru 3, boja pozadine se mijenja na dva načina. Svaki preglednik će za sebe odabrati odgovarajuću liniju, a preostala će biti zanemarena.