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: 3187 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?
dalintis MySpace
dalintis Twitter
Digg it
Komentarai

Komentarų nėra. Norėdami komentuoti turite prisijungti
CSS meniu
Naudingos nuorodos
Informacija ir viskas kas yra pateikta manualai.lt puslapiuose yra nemokama, tačiau, galite mus paremti per PayPal: