Co je CSS Hover?

Selektor :hover v CSS aplikuje styly na prvek, zatímco se nad ním pohybuje kurzor. Často se používá k vytváření interaktivních efektů nebo k upoutání pozornosti na prvky, když se s nimi interaguje.

Na prvek můžete cílit pomocí selektoru :hover pomocí jeho názvu tagu, třídy nebo ID.

řetězec a podřetězec

Například:

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

Barva pozadí v předchozím příkladu se změní na červenou (#ff0000), když uživatel najede na prvek s třídou 'tlačítko', zatímco barva textu se změní na bílou (#ffffff).

Kombinací selektoru :hover s dalšími prvky CSS, jako je velikost písma, ohraničení nebo transformace, lze vytvořit různé efekty hoveru. Je to účinný nástroj pro posílení vizuální zpětné vazby a interaktivity vašeho webu nebo aplikace.

Syntax:

 :hover { css declarations; } 

Podívejme se na několik příkladů, abychom porozuměli přechodu kurzoru pomocí CSS:

Pří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; } 

Vysvětlení:

Ve výše uvedeném příkladu máme tlačítko s přechodovým tlačítkem třídy. Počáteční barevné kombinace tlačítka jsou světle šedé pozadí (#eaeaea) a tmavě šedý text (#333333). Při najetí myší na tlačítko se barva pozadí změní na červenou (#ff0000) a barva textu na bílou (#ffffff).

Vlastnost přechodu ve třídě hover-button s trváním 0,3 sekundy a funkcí časování náběhu zajišťuje plynulý přechod pro změnu barvy pozadí, když myš najede na tlačítko.

Další prvky, jako jsou odkazy ( ), snímky ( ), divs ( ) nebo jakýkoli jiný prvek, který chcete učinit interaktivním, může používat podobné efekty přechodu. Změnou vlastností a hodnot v selektoru :hover můžete vytvářet různé efekty hoveru, které vyhovují vašim potřebám návrhu.

Příklad 2: efekt zvětšení 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); } 

Příklad 3: Efekt podtržení odkazu

HTML kód:

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

CSS kód:

Logika 1. řádu

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

Funkce Hover v CSS

Interaktivitu a vizuální efekty svých webových stránek můžete zlepšit pomocí funkce CSS:hover, která nabízí řadu výhod a funkcí. Níže jsou uvedeny některé základní funkce pro umístění kurzoru CSS:

Interaktivní efekt:Interaktivní efekty lze vytvořit změnou vzhledu prvků při najetí myší pomocí voliče :hover. Při interakci uživatelů s vaším obsahem můžete měnit vlastnosti, jako je barva pozadí, barva textu, neprůhlednost, stín rámečku, transformace a další, abyste jim ukázali vizuální zpětnou vazbu.Cílení na více prvků:Pomocí voliče :hover můžete vybrat více prvků na stránce. To znamená, že můžete navrhnout standardizované efekty přechodu pro různé prvky, včetně tlačítek, odkazů, obrázků, navigačních nabídek a jakéhokoli dalšího prvku, který chcete vytvořit interaktivní.Podpora pro přechody a animace:Selektor :hover lze použít s přechody a animacemi CSS k vytvoření úhledných, esteticky příjemných efektů. Definováním vlastností přechodu nebo animace můžete určit dobu trvání, funkci časování a další nastavení související s animací, abyste mohli regulovat, jak se styly změní, když na prvek najedete myší.Přidání dalších selektorů:Selektor :hover lze použít s jinými selektory CSS k zaměření na konkrétní prvky nebo k použití stylů podle předem definovaných kritérií. Můžete například vytvořit jedinečné a přizpůsobené efekty hover kombinací selektoru :hover s selektory tříd, selektory ID nebo pseudoprvky.Podpora přístupnosti:Při vývoji efektů vznášení je třeba vzít v úvahu dostupnost. Uživatelé asistenčních technologií, kteří používají kurzor, jako jsou čtečky obrazovky, nemusí mít přístup k efektu přechodu. Z tohoto důvodu se doporučuje zkontrolovat, zda je primární funkce nebo obsah stále čitelný a použitelný bez efektů přechodu.Podpora napříč prohlížeči:Většina moderních webových prohlížečů podporuje funkci CSS: hover. Jedná se o komponentu specifikace CSS kompatibilní s nejrozšířenějšími prohlížeči, včetně Chrome, Firefox, Safari, Edge a dalších. To zajišťuje konzistenci vzhledu a chování napříč různými platformami.