Tredun ohjelmistokehittäjien kurssimateriaaleja
Joskus verkkosivustolle halutaan erilaisia efektejä, jotka kertovat jotain sivun toiminnoista. Yleisiä tällaisia ovat hover-efekti (jotain tapahtuu, kun hiiri kulkee linkin yli), kun jokin on valittu/aktiivinen tai jos linkki on käyttämätön tai käytetty. Näitä kutsutaan nimellä pseudo-class. Se määritellään kaksoispisteellä.
a:hover {
color: red;
}
hover-efektiä käytetään erilaisten linkkien ja nappien kanssa. Tyypillinen efekti on, että tekstin väri tai taustaväri vaihtuu, usein vaaleamman tai tummemman sävyiseksi kuin alkuperäinen väri. Samalla usein hiiren nuoli muuttuu osoittimeksi. Toisaalta hover voi lisätä vaikka alleviivauksen, lisätä reunukset tai saada aikaan vaikkapa animaatioita, joita harjoittelemme myöhemmin.
a:hover {
color: red;
text-decoration: underline;
cursor: pointer;
}
Jos pidät hiirtä pohjassa linkin tai napin kohdalla, on se silloin aktiivinen. Siihen voi asettaa oman efektin, joka on usein uusi sävymuunnos tekstissä tai taustassa.
a:active {
color: pink;
border: solid 1px pink;
cursor: pointer;
}
Selain antaa jokaiselle linkille automaattisesti väriksi sinisen, kun linkkiä ei ole käytetty. Kun sitä on käytetty, on väri violetti. Nämä voi halutessaan määritellä itse. link määrittää linkin, jossa ei ole käyty, ja visited linkin, jossa on käyty.
a:link {
color: red;
}
a:visited {
color: red;
}
Kun jokin lomakkeen kenttä on valittu, voidaan lisätä pseudo-class focus, mikä ilmaisee sitä, että juuri siihen kenttään on mahdollista kirjoittaa. Tyypillisesti silloin muuttuu kentän taustaväri tai reunojen väri tai paksuus.
input:focus {
background-color: lightblue;
}