CSS -hover -tehosteet ovat melko yksinkertaisia luoda, ja perustoiminnot voidaan nopeasti ja helposti toteuttaa ja muokata useilla muilla vaihtoehdoilla. CSS (CSS) on kieli, jota käytetään merkintäkielellä luodun asiakirjan tyylin ja asettelun luomisessa, ja sitä voidaan käyttää helposti leijuutehosteiden luomiseen. Osoittotehosteet ovat muutoksia, jotka tapahtuvat tekstissä, kuvissa tai muissa asiakirjan objekteissa, kun hiiren ohjaama osoitin viedään kohteen päälle. CSS -hover -tehosteet luodaan tyypillisesti CSS -koodiin, ja ne voidaan toteuttaa nopeasti ja tehokkaasti.
Yksi helpoimmista CSS -hover -tehosteiden luontityypeistä on tehoste, joka muuttaa verkkosivuston linkkiä, kun se viedään sen päälle. Esimerkiksi joku saattaa haluta luoda tekstilinkin, joka näyttää tavalliselta tekstiltä tai on eri värinen kuin muu sivu, mutta kun se on “hiiren päällä” tai “viettynä”, se on alleviivattu tai rohkea. Tarkalleen kuinka tämä tehdään, riippuu tyypillisesti sivulla käytetystä koodauksesta, mutta yksinkertaisessa tapauksessa CSS -hover -tehoste voidaan lisätä CSS -sääntöjen “tyyli” -osioon.
Uusi sääntö luodaan CSS -hover -tehostetta varten käyttämällä asianmukaista tunnistetta objektille, johon vaikutus lisätään. Esimerkiksi valittu teksti voi olla osa luetteloa tai valittu verkkosivun rungosta. Tähän tekstiin on liitettävä erityinen tunniste, joka liittyy siihen body -koodauksessa. Kun tämä tunniste on merkitty, sääntö voidaan luoda CSS -hover -tehosteen luomiseksi kaikille objekteille, joilla on kyseinen tunniste.
Jos haluat esimerkiksi käyttää linkkiä alleviivatuksi tekstin avulla, kun käyttäjä vie hiiren sen päälle, voit aloittaa merkitsemällä linkin body -koodiin ja luomalla tälle tagille erityisen säännön. Tämän säännön puitteissa voit ilmoittaa, minkävärisen tekstin pitäisi olla, jolloin se erottuu helposti ympäröivästä tekstistä ja osoittaa visuaalisesti, että käyttäjä saattaa haluta viedä hiiren sen päälle, mikä käynnistää sitten CSS -hover -tehosteen. Tämä vaikutus lisätään luomalla tekstirivin tunnisteeseen “hover-pseudoluokka”.
Jos esimerkiksi tekstin tagi oli “a”, käyttäisit pseudoluokkaa, joka näytti “a: hover {…}” ja haluttu CSS-hover-tehoste hakasulkeessa. Edellisen esimerkin mukaan jos haluttu tehoste olisi alleviivata teksti, kun se viedään hiiren päälle, se lukisi “tekstin koristelu: alleviivaus”; kannattimen sisällä. Eri objekteille voidaan luoda useita erilaisia leijuutehosteita, ja jokaisella on tietty komento tehosteen luomiseksi, mutta prosessi on useimmissa tapauksissa samanlainen.