Zvýraznění odkazů v odstavci

Možná už jste se setkali se stránkou, kde odkazy „vystoupí“ z textu, když najedete myší na odstavec, který je obsahuje. Stejně se chová i tato stránka – přesuňte kurzor na některý z odstavců s odkazy a sledujte, jak se jejich barva zvýrazní. Zajišťují to následující pravidla:

a:link            { color: #b00; }
a:visited         { color: #400; }
a:hover           { background-color: yellow; }
p:hover a:link    { color: #f00; }
p:hover a:visited { color: #a00; }

Tentokrát pro nenavštívené i navštívené odkazy používám odstíny červené barvy. Normálně jsou tlumené, ale jakmile najedete kurzorem na odstavec obsahující nějaké odkazy, jejich barva se zintenzívní. To zajišťují pravidla začínající p:hover, která říkají: když je navštívený/nenavštívěný odkaz obsažen v odstavci, nad nímž se momentálně nachází kurzor, má vypadat tak a tak.

Čistě pro ilustraci a srovnání sem přidám ještě jeden odstavec obsahující nenavštívený odkaz a jeden navštívený.

zpět: pseudotřídy