Summary  
This chapter explains how to use the CSS :hover pseudo-class to apply dynamic style changes to elements when the mouse pointer hovers over them.  

General domain of usage  
Web user interfaces

Watch this demonstration to see how the :hover pseudo-class changes the appearance of buttons and links when you move your mouse over them. You'll observe how CSS hover effects provide instant visual feedback and enhance user interaction. Use simple examples. Do not show the full html document stucture. Focus only on the CSS.

Verkkosivun elementit voivat reagoida käyttäjän toimintaan. Yksi yleisimmistä toiminnoista on, kun hiiren osoitin viedään elementin päälle.

CSS:ssä tämä toteutetaan käyttämällä `:hover`-valeluokkaa.

## Mikä on `:hover`?

`:hover`-valeluokka määrittää tyylit, kun käyttäjä vie hiiren osoittimen elementin päälle.

Perussyntaksi:
```css
selector:hover {
  property: value;
}
```
Esimerkki:

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0ic3R5bGVzLmNzcyIgLz4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8YnV0dG9uIGNsYXNzPSJwcmltYXJ5LWJ1dHRvbiI+Q2xpY2sgTWU8L2J1dHRvbj4KICAgIDxhIGhyZWY9IiMiIGNsYXNzPSJzdHlsZWQtbGluayI+TGVhcm4gTW9yZTwvYT4KICA8L2JvZHk+CjwvaHRtbD4=

LyogQ3VycmVudCBmb2N1cyAqLwoucHJpbWFyeS1idXR0b24gewogIGJhY2tncm91bmQtY29sb3I6IGJsdWU7Cn0KCi5wcmltYXJ5LWJ1dHRvbjpob3ZlciB7CiAgYmFja2dyb3VuZC1jb2xvcjogbmF2eTsKfQoKLnN0eWxlZC1saW5rIHsKICB0ZXh0LWRlY29yYXRpb246IG5vbmU7Cn0KCi5zdHlsZWQtbGluazpob3ZlciB7CiAgdGV4dC1kZWNvcmF0aW9uOiB1bmRlcmxpbmU7Cn0KCi8qIEFkZGl0aW9uYWwgc3R5bGVzIGZvciBiZXR0ZXIgYXBwZWFyYW5jZSAobm90IHRoZSBjdXJyZW50IGZvY3VzKSAqLwpib2R5IHsKICBkaXNwbGF5OiBmbGV4OwogIGp1c3RpZnktY29udGVudDogY2VudGVyOwogIGFsaWduLWl0ZW1zOiBjZW50ZXI7CiAgYmFja2dyb3VuZC1jb2xvcjogbGlnaHRncmF5OwogIHBhZGRpbmc6IDE1cHg7Cn0KCi5wcmltYXJ5LWJ1dHRvbiB7CiAgY29sb3I6IHdoaXRlOwogIGJvcmRlcjogbm9uZTsKICBwYWRkaW5nOiAxMHB4IDIwcHg7CiAgZm9udC1zaXplOiAxNnB4OwogIGN1cnNvcjogcG9pbnRlcjsKICBib3JkZXItcmFkaXVzOiA1cHg7CiAgdHJhbnNpdGlvbjogYmFja2dyb3VuZC1jb2xvciAwLjNzIGVhc2U7CiAgbWFyZ2luLXJpZ2h0OiAyMHB4Owp9Cgouc3R5bGVkLWxpbmsgewogIGNvbG9yOiBibHVlOwogIGZvbnQtd2VpZ2h0OiBib2xkOwogIHRyYW5zaXRpb246IHRleHQtZGVjb3JhdGlvbiAwLjNzIGVhc2U7Cn0=

Kun käyttäjä vie hiiren painikkeen päälle, taustaväri muuttuu. Kun osoitin on linkin päällä, linkki alleviivataan.

`:hover` toimii useimmissa HTML-elementeissä. Se aktivoituu vain, kun osoitin on elementin päällä.

Huomio

## Miksi hover-efektit ovat tärkeitä

Hover-efektit parantavat käyttökokemusta, tarjoavat visuaalista palautetta ja tekevät käyttöliittymistä vuorovaikutteisempia.

Niitä käytetään yleisesti linkeissä (`<a>`) ja painikkeissa sekä navigointivalikoissa.

Hallitse CSS:n perusteet, tyylikieli, joka muuttaa verkkosivujen ulkoasun ja tuntuman. Tutustu keskeisiin käsitteisiin, kuten tekstityyleihin, väreihin, välistyksiin, laatikkomalliin, Flexboxiin ja koristeellisiin tehosteisiin. Kehitä taidot luoda visuaalisesti houkuttelevia ja hyvin jäsenneltyjä verkkosivuja.

Ymmärrä, miten CSS yhdistyy HTML:ään ja miten tyylejä sovelletaan selektoreiden avulla. Käytä värejä, tekstin muotoilua ja hover-efektejä visuaalisen esityksen hallintaan.

Paranna typografiaa käyttämällä riviväliä, välistyksiä, fonttiominaisuuksia ja mukautettuja fontteja. Hallitse fonttiperheitä, painoa, tyyliä ja kokoa paremman luettavuuden saavuttamiseksi.

Hallitse asettelun rakennetta käyttämällä margin-, padding-, border- ja width-ominaisuuksia. Ymmärrä laatikon koon määrittely sekä elementtien näyttötyypit, kuten block, inline ja inline-block.

Hallitse vaakasuoria ja pystysuoria asetteluja Flexbox-ominaisuuksien avulla. Säädä suuntaa, kohdistusta ja välistystä käyttöliittymäkomponenttien rakenteen määrittämiseksi.

Paranna asetteluja taustavärien, kuvien, pseudoelementtien ja varjojen avulla. Tyylittele visuaaliset komponentit syvyyden ja kontrastin luomiseksi.

Hover-efektien Lisääminen

Mikä on :hover?

Miksi hover-efektit ovat tärkeitä

Mikä on `:hover`?