Praneškite apie mus:


CSS hover efektas

Įvertink
(0 balsai)
1 1

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.

Atnaujinimo Data: Trečiadiens, Birželio 09, 2010
Lukas

Lukas

Manualai.lt tinklo autorius ir administratorius. VDU Energetikos Fizikos ir Verslo Informatikos studentas. LinkedIn

E-mail: Šis el. pašto adresas yra apsaugotas nuo spam botų. Jum reikalingas įjungtas Javasctipt kad jį matytumėte
Login to post comments