Čo je to CSS Hover?

Selektor :hover v CSS aplikuje štýly na prvok, zatiaľ čo sa nad ním pohybuje kurzor. Často sa používa na vytváranie interaktívnych efektov alebo na upozorňovanie na prvky, keď s nimi niekto interaguje.

Na prvok môžete zacieliť pomocou selektora :hover pomocou názvu značky, triedy alebo ID.

Napríklad:

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

Farba pozadia v predchádzajúcom príklade sa zmení na červenú (#ff0000), keď používateľ umiestni kurzor myši na prvok s triedou „tlačidlo“, zatiaľ čo farba textu sa zmení na bielu (#ffffff).

Kombináciou selektora :hover s inými prvkami CSS, ako je veľkosť písma, orámovanie alebo transformácia, možno vytvoriť rôzne efekty vznášania. Je to účinný nástroj na zlepšenie vizuálnej spätnej väzby a interaktivity vašej webovej stránky alebo aplikácie.

Syntax:

 :hover { css declarations; }  

Uveďme si niekoľko príkladov, aby sme porozumeli umiestneniu kurzora myši pomocou CSS:

Príklad 1:

HTML kód:

 Hover Me  

CSS kód:

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

Vysvetlenie:

Vo vyššie uvedenom príklade máme tlačidlo s tlačidlom prechodu triedy. Počiatočné farebné kombinácie tlačidla sú svetlosivé pozadie (#eaeaea) a tmavosivý text (#333333). Keď myšou prejdete na tlačidlo, farba pozadia sa zmení na červenú (#ff0000) a farba textu na bielu (#ffffff).

S trvaním 0,3 sekundy a funkciou jednoduchého časovania zaisťuje vlastnosť prechodu v triede hover-button plynulý prechod pre zmenu farby pozadia, keď myšou prejdete na tlačidlo.

Ďalšie prvky, ako sú odkazy ( ), snímky ( ), divs ( ) alebo akýkoľvek iný prvok, ktorý chcete urobiť interaktívnym, môže používať podobné efekty vznášania. Zmenou vlastností a hodnôt v rámci selektora :hover môžete vytvoriť rôzne efekty vznášania sa, ktoré vyhovujú vašim potrebám dizajnu.

Príklad 2: Efekt priblíženia obrazu

HTML kód:

CSS kód:

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

Príklad 3: Efekt podčiarknutia odkazu

HTML kód:

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

CSS kód:

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

Funkcia Hover v CSS

Interaktivitu a vizuálne efekty svojich webových stránok môžete zlepšiť pomocou funkcie CSS:hover, ktorá ponúka množstvo výhod a funkcií. Nasleduje niekoľko základných funkcií CSS:

Interaktívny efekt: Interaktívne efekty je možné dosiahnuť zmenou vzhľadu prvkov pri umiestnení kurzora myši nad pomocou voliča :hover. Keď používatelia interagujú s vaším obsahom, môžete zmeniť vlastnosti, ako je farba pozadia, farba textu, nepriehľadnosť, tieň rámčeka, transformácia a ďalšie, aby ste im ukázali vizuálnu spätnú väzbu. Zacielenie na viacero prvkov: Pomocou voliča :hover môžete vybrať viacero prvkov na stránke. To znamená, že môžete navrhnúť štandardizované efekty vznášania pre rôzne prvky vrátane tlačidiel, odkazov, obrázkov, navigačných ponúk a akéhokoľvek iného prvku, ktorý chcete urobiť interaktívnym. Podpora pre prechody a animácie: Selektor :hover možno použiť s prechodmi a animáciami CSS na vytvorenie úhľadných, esteticky príjemných efektov. Definovaním vlastností prechodu alebo animácie môžete určiť trvanie, funkciu časovania a ďalšie nastavenia súvisiace s animáciou, aby ste mohli regulovať, ako sa štýly zmenia pri umiestnení kurzora myši nad prvok. Pridanie ďalších selektorov: Selektor :hover možno použiť s inými selektormi CSS na zameranie sa na konkrétne prvky alebo použitie štýlov podľa vopred definovaných kritérií. Môžete napríklad vytvoriť jedinečné a prispôsobené efekty vznášania sa kombináciou selektora :hover so selektormi tried, selektormi ID alebo pseudoprvkami. Podpora dostupnosti: Pri vytváraní efektov vznášania by sa mala zvážiť dostupnosť. Používatelia asistenčných technológií, ktorí používajú kurzor, ako napríklad čítačky obrazovky, nemusia mať prístup k efektu vznášania. Z tohto dôvodu sa odporúča skontrolovať, či je primárna funkcia alebo obsah stále čitateľný a použiteľný bez efektov vznášania. Podpora viacerých prehliadačov: Väčšina moderných webových prehliadačov podporuje funkciu CSS: prechod myšou. Je to komponent špecifikácie CSS kompatibilný s najpoužívanejšími prehliadačmi vrátane Chrome, Firefox, Safari, Edge a ďalších. To zaisťuje konzistentnosť vzhľadu a správania na rôznych platformách.