Hover- ja active-muunnelmat
Käyttäkää hover:*- ja active:*-etuliitteitä värien, varjojen ja muunnosten muuttamiseen, kun käyttäjä on vuorovaikutuksessa elementin kanssa.
Hover- ja active-muunnelmat on ilmainen Tailwind CSS Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Tailwind CSS Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Tailwind CSS Academy-kurssilla on yhteensä 4 oppituntia.
Pseudo-tilavariantit Tailwindissa
CSS:n pseudoluokkien, kuten :hover, :active ja :focus, avulla voit käyttää tyylejä vain tiettyjen käyttäjän toimintojen aikana. Tailwindissa saat ne käyttöön lisäämällä minkä tahansa apuohjelman eteen variantin nimen ja kaksoispisteen. Esimerkiksi hover:bg-blue-600 vaihtaa taustavärin vain silloin, kun osoitin on elementin päällä. Näin yleisimpiä vuorovaikutustiloja varten ei tarvita mukautettuja CSS-sääntöjä.
<!-- Basic hover state -->
<button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">
Hover me
</button>hover:-etuliite käytännössä
hover:-etuliite käyttää tyylejä, kun käyttäjän osoitin on elementin päällä. Voit lisätä hover-etuliitteen mihin tahansa Tailwindin apuohjelmaan: väriin, varjoon, skaalaukseen, peittävyyteen, tekstin koristeluun ja moneen muuhun. Yhdistelmä hover:shadow-lg hover:-translate-y-1 luo suositun kortin kohoamisefektin, jossa kortti näyttää nousevan sivusta osoittimen lähestyessä sitä.
<!-- Card with multiple hover effects -->
<div class="max-w-xs bg-white rounded-xl p-5 shadow-md hover:shadow-xl hover:-translate-y-1 transition-all duration-300 cursor-pointer border border-gray-100">
<div class="w-10 h-10 bg-indigo-100 rounded-lg flex items-center justify-center mb-3">
<span class="text-indigo-600 font-bold">A</span>
</div>
<h3 class="font-bold text-gray-900">Analytics Card</h3>
<p class="text-sm text-gray-500 mt-1">Hover to see lift effect</p>
</div>Tekstin tyylittely hover-tilassa
Hover-variantit toimivat myös tekstin ominaisuuksissa. hover:text-blue-600 vaihtaa tekstin värin hover-tilassa, hover:underline lisää alleviivauksen ja hover:no-underline poistaa sen. Navigointilinkeissä käytetään usein yhdistelmää text-gray-600 hover:text-gray-900, joka tummentaa tekstin hienovaraisesti hover-tilassa ja viestii vuorovaikutteisuudesta ilman erillistä alleviivausta.
<!-- Navigation with hover text effects -->
<nav class="flex gap-6 p-4">
<a href="#" class="text-gray-600 hover:text-gray-900 transition-colors">Home</a>
<a href="#" class="text-gray-600 hover:text-indigo-600 hover:underline transition-colors">Products</a>
<a href="#" class="text-gray-600 hover:text-gray-900 transition-colors">About</a>
<a href="#" class="text-indigo-600 font-medium">Contact</a>
</nav>active: painettujen tilojen käsittelyyn
active:-variantti käyttää tyylejä, kun käyttäjä painaa aktiivisesti elementtiä (mousedown- ja mouseup-tapahtumien välisenä hetkenä). Näin syntyy fyysistä painallusta jäljittelevä palaute. Yleisiä malleja ovat esimerkiksi active:scale-95, joka saa painikkeen näyttämään painettaessa hieman kokoon puristuvalta, ja active:bg-blue-700, joka tummentaa taustaa hieman ja antaa fyysistä painiketta muistuttavaa tuntopalautetta.
<!-- Button with press animation using active: -->
<div class="flex gap-4">
<!-- Scale-down on press -->
<button class="bg-blue-500 hover:bg-blue-600 active:scale-95 active:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium transition-all">
Click Me
</button>
<!-- Darken on press -->
<button class="bg-emerald-500 hover:bg-emerald-600 active:bg-emerald-800 text-white px-6 py-3 rounded-lg font-medium transition-colors">
Buy Now
</button>
</div>hover:- ja active:-varianttien yhdistäminen
Painikkeen täydellinen vuorovaikutussarja on: oletus → hover → active → oletus. Kunkin tilan tulisi antaa selkeä mutta muiden tilojen kanssa yhteensopiva visuaalinen palaute. Tyypillinen malli on bg-blue-500 hover:bg-blue-600 active:bg-blue-700 — asteittain tummenevat sävyt jäljittelevät fyysistä syvyyttä. Tämä kolmen tilan eteneminen muodostaa hyvin suunnitellun käyttöliittymän saavutettavan painikkeen perustan.
<!-- Full button state progression -->
<div class="flex gap-4 flex-wrap">
<!-- Primary button: full state progression -->
<button class="bg-blue-500 hover:bg-blue-600 active:bg-blue-700 text-white px-5 py-2.5 rounded-lg font-medium transition-colors active:scale-95">
Primary
</button>
<!-- Danger button: full state progression -->
<button class="bg-red-500 hover:bg-red-600 active:bg-red-700 text-white px-5 py-2.5 rounded-lg font-medium transition-colors active:scale-95">
Delete
</button>
<!-- Ghost button: hover adds background -->
<button class="text-gray-700 hover:bg-gray-100 active:bg-gray-200 px-5 py-2.5 rounded-lg font-medium transition-colors">
Ghost
</button>
</div>hover: muissa kuin painike-elementeissä
hover:-variantti toimii kaikissa HTML-elementeissä, ei vain painikkeissa. Taulukoiden rivit luokalla hover:bg-gray-50, luettelokohdat luokalla hover:bg-blue-50 ja ruudukon kortit luokalla hover:border-blue-500 hyötyvät kaikki hover-tiloista. Kun hover-tyylin yhteyteen lisätään cursor-pointer, käyttäjälle viestitään, että elementtiä voi napsauttaa, vaikka kyseessä ei olisi natiivi painike tai linkki.
<!-- Hoverable table rows -->
<table class="w-full">
<thead>
<tr class="bg-gray-50 text-left">
<th class="p-3 font-semibold">Name</th>
<th class="p-3 font-semibold">Status</th>
<th class="p-3 font-semibold">Score</th>
</tr>
</thead>
<tbody class="divide-y">
<tr class="hover:bg-blue-50 cursor-pointer transition-colors">
<td class="p-3">Alice</td>
<td class="p-3 text-green-600">Active</td>
<td class="p-3">98</td>
</tr>
<tr class="hover:bg-blue-50 cursor-pointer transition-colors">
<td class="p-3">Bob</td>
<td class="p-3 text-yellow-600">Pending</td>
<td class="p-3">74</td>
</tr>
</tbody>
</table>hover: ja muunnosapuohjelmat
Muunnosapuohjelmat yhdistettynä hover:-varianttiin luovat liike-efektejä ilman JavaScriptiä. hover:scale-105 suurentaa elementtiä hieman, hover:-translate-y-2 nostaa sitä ylöspäin ja hover:rotate-3 kallistaa sitä. Nämä mikrovuorovaikutukset tekevät käyttöliittymistä elävän ja responsiivisen tuntuisia. Yhdistä muunnoksiin aina transition-transform duration-200, jotta animaatio on tasainen eikä muutos tapahdu töksähtäen.
<!-- Interactive feature icons with transform hover -->
<div class="grid grid-cols-3 gap-6 p-8">
<div class="text-center cursor-pointer group">
<div class="w-16 h-16 bg-blue-100 rounded-2xl flex items-center justify-center mx-auto mb-2 hover:scale-110 hover:bg-blue-200 transition-all duration-200">
<span class="text-2xl">🚀</span>
</div>
<span class="text-sm font-medium">Launch</span>
</div>
<div class="text-center cursor-pointer">
<div class="w-16 h-16 bg-green-100 rounded-2xl flex items-center justify-center mx-auto mb-2 hover:-translate-y-1 hover:shadow-md transition-all duration-200">
<span class="text-2xl">🌱</span>
</div>
<span class="text-sm font-medium">Grow</span>
</div>
<div class="text-center cursor-pointer">
<div class="w-16 h-16 bg-purple-100 rounded-2xl flex items-center justify-center mx-auto mb-2 hover:rotate-6 transition-transform duration-200">
<span class="text-2xl">⚡</span>
</div>
<span class="text-sm font-medium">Boost</span>
</div>
</div>hover: linkkien alleviivaustehosteissa
Viimeistelty hover-alleviivaustehoste edellyttää, että alleviivaus laajenee keskeltä tai liukuu sisään vasemmalta. Käytä relative-asemointia ja pseudoelementtiä Tailwindin after:-variantin avulla: määritä alareuna oletuksena nollan levyiseksi ja laajenna se hover-tilassa koko leveydelle. Näin syntyy animoitu alleviivaus, joka tuntuu harkitummalta kuin selaimen oletusarvoinen text-decoration: underline.
<!-- Animated underline link effect -->
<a
href="#"
class="relative text-gray-700 font-medium after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-0 after:bg-blue-500 hover:after:w-full after:transition-all after:duration-300"
>
Hover for animated underline
</a>active: lomakkeen lähetyksen palautteessa
Lomakkeen lähetyspainikkeet hyötyvät erityisesti active:-tiloista. Kun käyttäjä napsauttaa Lähetä-painiketta, active-tila antaa heti visuaalisen vahvistuksen napsautuksen rekisteröitymisestä, vaikka palvelimen vastaus kestäisi hetken. Yhdistelmä active:bg-green-700 ja active:scale-95 luo miellyttävän painallustunteen ja viestii, että toiminto vastaanotettiin.
<!-- Submit form button with clear active state -->
<form class="max-w-sm space-y-4 p-6">
<div>
<label class="block text-sm font-medium mb-1">Email</label>
<input type="email" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="you@example.com" />
</div>
<button
type="submit"
class="w-full bg-blue-600 hover:bg-blue-700 active:bg-blue-800 active:scale-[0.99] text-white py-3 rounded-lg font-semibold transition-all"
>
Subscribe to Newsletter
</button>
</form>hover: ja responsiiviset variantit
Hover- ja active-variantteja voi yhdistää responsiivisiin rajapisteisiin. Syntaksi pinoutuu vasemmalta oikealle: sm:hover:bg-blue-600 tarkoittaa, että pienillä näytöillä ja sitä suuremmilla näytöillä väri muuttuu hover-tilassa siniseksi. Kosketuslaitteissa hover-tilat aktivoituvat kerran napautettaessa ja säilyvät, kunnes jotakin toista elementtiä napautetaan. Tämä on tärkeää huomioida hover-efektejä suunniteltaessa. Poistakaa hoverin visuaaliset muutokset mobiililaitteissa responsiivisilla etuliitteillä, jos ne aiheuttavat käytettävyysongelmia.
<!-- Hover effects only on desktop (md+) -->
<div class="grid grid-cols-2 gap-4">
<div class="bg-white border rounded-xl p-4 md:hover:shadow-xl md:hover:-translate-y-1 transition-all duration-300">
<h3 class="font-bold">Feature A</h3>
<p class="text-sm text-gray-500">Lift on hover (desktop only)</p>
</div>
<div class="bg-white border rounded-xl p-4 md:hover:shadow-xl md:hover:-translate-y-1 transition-all duration-300">
<h3 class="font-bold">Feature B</h3>
<p class="text-sm text-gray-500">Lift on hover (desktop only)</p>
</div>
</div>Täydellisen painikekomponentin rakentaminen
Tässä on tuotantokäyttöön valmis painike, jossa ovat kaikki vuorovaikutustilat: oletus, hover, active, focus-visible ja disabled. Tämä malli kattaa kaikki tilanteet, joita käyttäjä saattaa kohdata, ja antaa selkeää visuaalista palautetta jokaisessa vaiheessa. Voit kopioida mallin projekteihisi yhdenmukaisen painikekomponentin perustaksi.
<!-- Complete button with all states -->
<div class="flex gap-4 flex-wrap">
<!-- Primary button: all states -->
<button
class="bg-blue-600 hover:bg-blue-700 active:bg-blue-800 active:scale-95 text-white px-6 py-2.5 rounded-lg font-medium transition-all focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none"
>
Active Button
</button>
<!-- Disabled state -->
<button
disabled
class="bg-blue-600 hover:bg-blue-700 active:bg-blue-800 active:scale-95 text-white px-6 py-2.5 rounded-lg font-medium transition-all focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none"
>
Disabled Button
</button>
</div>Pikatarkistus
Testaa, miten hyvin ymmärrät tämän oppitunnin Tailwind CSS Mastery -käsitteet.
Oppitunnin kertaus
Tässä oppitunnissa opit, että hover: käyttää tyylejä, kun osoitin on elementin päällä, active: käyttää tyylejä mousedown- ja mouseup-tapahtumien välisen painalluksen aikana fyysisen palautteen antamiseksi ja hover:bg-*- ja active:bg-*-luokkien yhdistäminen asteittain tummeneviin sävyihin luo painikkeen tavanomaisen vuorovaikutussarjan. Seuraavaksi tutustumme näppäimistön saavutettavuuden focus- ja focus-visible-variantteihin.
Opi HTML tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 30
- Oppitunnit
- 120
Usein kysytyt kysymykset
Onko oppitunti ”Hover- ja active-muunnelmat” ilmainen?
Kyllä – oppitunnin ”Hover- ja active-muunnelmat” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Tailwind CSS Academy-kurssin, päivitä CoddyKit PROhon. Tailwind CSS Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Hover- ja active-muunnelmat”?
Käyttäkää hover:*- ja active:*-etuliitteitä värien, varjojen ja muunnosten muuttamiseen, kun käyttäjä on vuorovaikutuksessa elementin kanssa. Harjoittelet Tailwind CSS Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Tailwind CSS Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Tailwind CSS Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.
Kuinka kauan ”Hover- ja active-muunnelmat”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä Tailwind CSS Academy-oppitunnilla?
Kyllä. Jokainen Tailwind CSS Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- Hover- ja active-muunnelmat
- Focus- ja focus-visible-muunnelmat
- Disabled- ja placeholder-muunnelmat
- Group- ja peer-muunnelmat