Kas yra CSS Hover?

CSS parinkiklis :hover pritaiko stilius elementui, o žymeklis užves virš jo. Jis dažnai naudojamas norint sukurti interaktyvius efektus arba atkreipti dėmesį į elementus, kai su jais sąveikaujama.

Galite taikyti elementą naudodami :hover parinkiklį, naudodami žymos pavadinimą, klasę arba ID.

Pavyzdžiui:

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

Ankstesniame pavyzdyje fono spalva taps raudona (#ff0000), kai vartotojas užves žymeklį virš elemento su klasės mygtuku, o teksto spalva taps balta (#ffffff).

Įvairūs užvedimo efektai gali būti sukurti derinant :hover parinkiklį su kitais CSS elementais, tokiais kaip šrifto dydis, kraštinė ar transformacija. Tai galingas įrankis, skirtas pagerinti jūsų svetainės ar programos vaizdinį grįžtamąjį ryšį ir interaktyvumą.

Sintaksė:

 :hover { css declarations; } 

Paimkime kelis pavyzdžius, kad suprastume užvedimą naudojant CSS:

1 pavyzdys:

HTML kodas:

regresijos išraiška java

 Hover Me 

CSS kodas:

 .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; } 

Paaiškinimas:

Aukščiau pateiktame pavyzdyje turime mygtuką su klasės užvedimo mygtuku. Pradiniai mygtuko spalvų deriniai yra šviesiai pilkas fonas (#eaeaea) ir tamsiai pilkas tekstas (#333333). Užvedus pelės žymeklį virš mygtuko, fono spalva pasikeičia į raudoną (#ff0000), o teksto spalva į baltą (#ffffff).

Turėdama 0,3 sekundės trukmę ir lengvo laiko nustatymo funkciją, užvedimo mygtuko klasės perėjimo savybė užtikrina sklandų fono spalvos pasikeitimą, kai pelė užvedama virš mygtuko.

Kiti elementai, pvz., nuorodos ( ), vaizdai ( ), divs ( ) arba bet kuris kitas elementas, kurį norite padaryti interaktyvų, gali naudoti panašius užvedimo efektus. Galite sukurti įvairius užvedimo efektus, atitinkančius jūsų dizaino poreikius, pakeisdami ypatybes ir reikšmes :hover parinkiklyje.

2 pavyzdys: vaizdo priartinimo efektas

HTML kodas:

CSS kodas:

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

3 pavyzdys: nuorodos pabraukimo efektas

HTML kodas:

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

CSS kodas:

shweta tiwari

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

„Hover“ funkcija CSS

Galite pagerinti savo tinklalapių interaktyvumą ir vaizdinius efektus naudodami CSS:hover funkciją, kuri siūlo daugybę privalumų ir funkcijų. Toliau pateikiamos kelios esminės CSS užvedimo ant pelės žymeklio funkcijos:

Interaktyvus efektas:Interaktyvius efektus galima sukurti pakeitus elementų išvaizdą, kai užveskite pelės žymeklį, naudodami :hover parinkiklį. Kai naudotojai sąveikauja su jūsų turiniu, galite keisti tokias ypatybes kaip fono spalva, teksto spalva, neskaidrumas, dėžutės šešėlis, transformacija ir kt., kad parodytumėte jiems vaizdinį grįžtamąjį ryšį.Taikymas pagal kelis elementus:Galite pasirinkti kelis elementus puslapyje naudodami :hover parinkiklį. Tai reiškia, kad galite sukurti standartizuotus užvedimo efektus įvairiems elementams, įskaitant mygtukus, nuorodas, vaizdus, ​​naršymo meniu ir bet kurį kitą elementą, kurį norite padaryti interaktyvų.Perėjimų ir animacijų palaikymas::hover parinkiklis gali būti naudojamas su CSS perėjimais ir animacijomis, kad būtų sukurti gražūs, estetiški efektai. Apibrėždami perėjimo arba animacijos ypatybes, galite nurodyti trukmę, laiko funkciją ir kitus su animacija susijusius parametrus, kad reguliuotumėte, kaip keičiasi stiliai, kai virš elemento užvedamas pelės žymeklis.Papildomų parinktuvų pridėjimas::hover parinkiklis gali būti naudojamas su kitais CSS parinkikliais, kad būtų galima sutelkti dėmesį į tam tikrus elementus arba taikyti stilius pagal iš anksto nustatytus kriterijus. Pavyzdžiui, galite sukurti unikalius ir pritaikytus užvedimo efektus, derindami :hover parinkiklį su klasės parinkikliais, ID parinkikliais arba pseudoelementais.Prieinamumo palaikymas:Kuriant užvedimo efektus reikia atsižvelgti į prieinamumą. Pagalbinių technologijų naudotojai, naudojantys žymeklį, pvz., ekrano skaitytuvus, gali neturėti prieigos prie užvedimo efekto. Dėl šios priežasties patariama patikrinti, ar pagrindinė funkcija arba turinys vis dar yra skaitomi ir tinkami naudoti be užvedimo efektų.Kelių naršyklių palaikymas:Dauguma šiuolaikinių interneto naršyklių palaiko CSS: hover funkciją. Tai CSS specifikacijos komponentas, suderinamas su plačiausiai naudojamomis naršyklėmis, įskaitant Chrome, Firefox, Safari, Edge ir kt. Tai užtikrina išvaizdos ir elgesio nuoseklumą įvairiose platformose.