Mikä on CSS Hover?

CSS:n :hover-valitsin soveltaa tyylejä elementtiin, kun osoitin liikkuu sen päällä. Sitä käytetään usein tuottamaan interaktiivisia tehosteita tai kiinnittämään huomiota elementteihin, kun niitä ollaan vuorovaikutuksessa.

Voit kohdistaa elementtiin :hover-valitsimella sen tunnisteen nimen, luokan tai tunnuksen avulla.

Esimerkiksi:

ls komentaa linuxia

 .button:hover { background-color: #ff0000; color: #ffffff; } 

Edellisen esimerkin taustaväri muuttuu punaiseksi (#ff0000), kun käyttäjä vie hiiren luokkapainikkeella varustetun elementin päälle, kun taas tekstin väri muuttuu valkoiseksi (#ffffff).

Erilaisia ​​hover-tehosteita voidaan tuottaa yhdistämällä :hover-valitsin muihin CSS-elementteihin, kuten kirjasinkoon, reunuksen tai muunnosten kanssa. Se on tehokas työkalu verkkosivustosi tai sovelluksesi visuaalisen palautteen ja vuorovaikutteisuuden parantamiseen.

Syntaksi:

 :hover { css declarations; } 

Otetaan joitain esimerkkejä, jotta ymmärrät hiiren osoittimen CSS:n avulla:

Esimerkki 1:

HTML-koodi:

 Hover Me 

CSS-koodi:

lanka.tuhoa

 .hover-button { background-color: #eaeaea; color: #333333; padding: 10px 20px; border: none; cursor: pointer; transition: background-color 0.3s ease; } .hover-button:hover { background-color: #ff0000; color: #ffffff; } 

Selitys:

Yllä olevassa esimerkissä meillä on painike, jossa on luokan hover-painike. Painikkeen alkuperäiset väriyhdistelmät ovat vaaleanharmaa tausta (#eaeaea) ja tummanharmaa teksti (#333333). Kun hiiri vie painikkeen päälle, taustaväri muuttuu punaiseksi (#ff0000) ja tekstin väri valkoiseksi (#ffffff).

Hover-button-luokan siirtymäominaisuus, jonka kesto on 0,3 sekuntia ja helppokäyttöinen ajoitustoiminto, varmistaa sulavan siirtymän taustavärin muutokselle, kun hiiri liikkuu painikkeen päällä.

Muut elementit, kuten linkit ( ), kuvat ( ), divs ( ) tai mikä tahansa muu elementti, jonka haluat tehdä interaktiiviseksi, voi käyttää samanlaisia ​​hover-tehosteita. Voit luoda erilaisia ​​hover-tehosteita, jotka sopivat suunnittelutarpeisiisi muuttamalla ominaisuuksia ja arvoja :hover-valitsimessa.

Esimerkki 2: kuvan zoomaustehoste

HTML-koodi:

CSS-koodi:

java pää

 .image-zoom { overflow: hidden; } .image-zoom img { transition: transform 0.3s ease; } .image-zoom:hover img { transform: scale(1.2); } 

Esimerkki 3: Linkin alleviivaustehoste

HTML-koodi:

 <a href="#">Hover Me</a> 

CSS-koodi:

 .underline-link { text-decoration: none; transition: border-bottom 0.3s ease; } .underline-link:hover { border-bottom: 2px solid #ff0000; } 

Hover-ominaisuus CSS:ssä

Voit parantaa verkkosivujesi interaktiivisuutta ja visuaalisia tehosteita käyttämällä CSS:hover-ominaisuutta, joka tarjoaa useita etuja ja ominaisuuksia. Seuraavassa on joitain olennaisia ​​CSS-hover-ominaisuuksia:

Interaktiivinen tehoste:Vuorovaikutteisia tehosteita voidaan tuottaa muuttamalla elementtien ulkoasua vietäessä hiiren osoitinta päälle käyttämällä :hover-valitsinta. Kun käyttäjät ovat vuorovaikutuksessa sisältösi kanssa, voit muuttaa ominaisuuksia, kuten taustaväriä, tekstin väriä, peittävyyttä, laatikon varjoa, muunnoksia ja muuta näyttääksesi heille visuaalista palautetta.Useisiin elementteihin kohdistaminen:Voit valita sivulla useita elementtejä :hover-valitsimella. Tämä tarkoittaa, että voit suunnitella standardoituja hover-tehosteita useille elementeille, kuten painikkeille, linkeille, kuville, navigointivalikoille ja muille elementeille, joista haluat tehdä interaktiivisia.Tuki siirtymille ja animaatioille::hover-valitsinta voidaan käyttää CSS-siirtymien ja animaatioiden kanssa tuottamaan liukkaita, esteettisesti miellyttäviä tehosteita. Määrittämällä siirtymän tai animaation ominaisuuksia voit määrittää keston, ajoitustoiminnon ja muut animaatioon liittyvät asetukset säätelemään tyylien muuttumista, kun hiiren osoitin viedään elementin päälle.Lisää valitsimia::hover-valitsinta voidaan käyttää muiden CSS-valitsimien kanssa keskittymään tiettyihin elementteihin tai soveltamaan tyylejä ennalta määritettyjen ehtojen mukaisesti. Voit esimerkiksi luoda ainutlaatuisia ja räätälöityjä hover-tehosteita yhdistämällä :hover-valitsimen luokkavalitsimiin, ID-valitsimiin tai pseudoelementteihin.Tukea saavutettavuutta:Esteettömyys tulee ottaa huomioon hover-efektejä kehitettäessä. Kursoria käyttävillä aputekniikoilla, kuten näytönlukuohjelmilla, ei välttämättä ole pääsyä hover-tehosteeseen. Tästä syystä on suositeltavaa tarkistaa, että ensisijainen toiminto tai sisältö on edelleen luettavissa ja käyttökelpoinen ilman hover-tehosteita.Selainten välinen tuki:Useimmat nykyaikaiset verkkoselaimet tukevat CSS: hover -ominaisuutta. Se on CSS-spesifikaatiokomponentti, joka on yhteensopiva yleisimmin käytettyjen selaimien kanssa, mukaan lukien Chrome, Firefox, Safari, Edge ja muut. Tämä varmistaa ulkonäön ja käyttäytymisen yhdenmukaisuuden eri alustoilla.