:hover álosztály
Álosztály: Kijelöli azt az elemet, amely fölött egérkurzor áll.
:hover
{
meghatározásblokk
}
/*Az egérkurzor fölötte áll.*/
:active álosztály
Álosztály: Kijelöli azt az elemet, amely fölött egérkurzor áll, és a felhasználó megnyomta a bal egér gombot.
:active
{
meghatározásblokk
}
/*Most kattintunk rá, de az egérgomb még nincs felengedve.*/
:focus álosztály
Álosztály: Kijelöli azt az elemet, amely éppen a billentyűzetről érkező adatokat fogadja.
:focus
{
meghatározásblokk
}
/*Ez az elem fogadja a billentyűzettel bevitt adatokat.*/
Példa:
Forráskód
<style>
a:hover { background-color:yellow; } /* Az egérkurzor fölötte áll.*/
a:active { background-color:red; }
/* Most kattintunk rá, de az egérgomb még nincs felengedve.*/
input:focus { background-color:yellow; }
/*Ez az elem fogadja a billentyűzettel bevitt adatokat.*/
</style>
...
<body>
Link 1: <a href="https://www.google.hu/" target="_blank">Google</a> <br>
Link 2: <a href="https://www.yahoo.com/" target="_blank">Yahoo</a> <br>
Input 1: <input type="text" > <br>
Input 2: <input type="text" autofocus>
</body>
Eredmény*
* Az eredmény megjelenítése az Ön által használt böngészőtől függ.
A példakód külön ablakban is megtekinthető: css_kijelolo_dinamikus_aloszt.html