Praneškite apie mus:


CSS hover efektas

0

Pasinaudojant css pseudo klase :hover, galime sukurti įvairių efektų, kurie pasirodytų vartotojui užėjus su pelės žymekliu ant elemento.



Pavyzdys

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
div {
background-repeat:no-repeat;
background-position:top left;
}
 
.meniu {
width:80px; height:103px;
margin:0px; padding:0px;
display:block;
float:left;
}
 
div#pirmas {
background-image:url('2_1.png');
}
 
div#antras {
background-image:url('3_1.png');
}
 
div#trecias {
background-image:url('4_1.png');
}
 
/* hover efektai */
 
div#pirmas:hover {
background-image:url('2_2.png');
}
 
div#antras:hover {
background-image:url('3_2.png');
}
 
div#trecias:hover {
background-image:url('4_2.png');
}

 

pabandyk_pats

 

Kaip matote, šiame pavyzdyje keičiam parametro background-image reikšmę, kas pakeičia fono paveikslėlį kitu ir tokiu būdu gauname užėjimo su pele ant elemento efektą. Hover metu galime keisti ne tik fono paveikslėlį, bet galime keisti bet kokius elemento css stilius.

Perskaityta: 3216 kartų

Lukas
Autorius: Lukas
El. paštas.: Šis el. pašto adresas yra apsaugotas nuo spam botų. Jum reikalingas įjungtas Javasctipt kad jį matytumėte
Manualai.lt tinklo autorius ir administratorius. VDU Energetikos Fizikos ir Verslo Informatikos studentas. LinkedIn
Raktažodžiai
css    pazengusiems    hover    efektas   
Patinka straipsnis?
Komentarai

Komentarų nėra. Norėdami komentuoti turite prisijungti