CSS hover efektas

Lukas

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

Pavyzdys

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');
}

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: 3671 kartų