Dinamikus álosztály kijelölők

: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