Kaskádové styly (CSS) jsou navrženy pomocí nebo XML (včetně XHTML, SVG). Jedná se o jazyk šablony stylů, který se primárně používá k popisu prvků pomocí rozmanité řady metod formátování. Jedna z metod se vznáší a v tomto článku pochopíme Hover v CSS následujícím způsobem:

• Co je Hover v CSS?
• Kde se používá Hover?
• Co dělá Hover?
• Kompatibilita
• Jak to funguje?
• Umístit kurzor na barvu pozadí na „červenou“
• Vytváření krytí vznášení na obrázcích
• Vytváření překrytí textu na obrázcích

Co je Hover v CSS?

Vznášení CSS je komponenta selektoru, která se používá ke stylu různých prvků, když nad nimi umístíte ukazatel myši. Lze je použít téměř na každý prvek HTML. Funkce přechodu v CSS má podstatný význam při navrhování webových stránek.

Komponenta přechodu může zvýraznit, kódovat a přizpůsobit webové stránky podle preferencí uživatele v kompaktním a efektivním programu pro navrhování webů.

Kde se používá Hover?

Nejběžnější příklady životaschopnosti funkce přechodu lze zvýraznit na hlavních nákupních webech, jako jsou Flipkart a Amazon. Když uživatelé umístí kurzor na jakýkoli produkt na těchto webových stránkách elektronického obchodu, produkt je naprogramován tak, aby vykonával funkci automatického přechodu na přiblížení, aby zákazníkovi poskytl lepší pohled na jejich vybrané produkty. Prostřednictvím tohoto programování je webová stránka navržena tak, aby zobrazovala kompaktní pohled na celou řadu produktů spolu s podrobným pohledem na požadovaný produkt v jediném designu webové stránky.

Co dělá Hover?

Vznášet se je multifunkční programovací nástroj, jehož prostřednictvím si uživatel může přizpůsobit cílový prvek pomocí nekonečného počtu kritérií formátování. Některé instance provozního know-how funkce přechodu zahrnují:

• Změna barvy pozadí / písma
• Vkládání skrytého textu, který se zobrazí při najetí myší
• Vytvářejte na obrázcích efekty přechodu
• Automatické přiblížení textu / obrázků
• Upravit neprůhlednost obrazu
• Vkládání textu
• Zaměnit obrázek
• Div. Vznášet se
• Několik dalších operací formátování kurzoru CSS.

Efekt vznášení v zásadě upravuje hodnotu vlastnosti prvku tak, aby umožňoval animovat změny uvedeného textu / obrázku nebo příslušných prvků. Vložení elementů přechodu CSS do designu webové stránky transformuje běžnou webovou stránku na interaktivní, robustní a vysoce funkční webovou stránku. Tyto návrhy webových stránek jsou uživatelsky přívětivé a komplexní. Webové stránky určené k umístění kurzoru myši mají vyšší přitažlivost pro spotřebitele a přitahují pozornost potenciálních zákazníků.

Kompatibilita kurzoru v CSS

Funkce přechodu je kompatibilní se všemi hlavními webovými prohlížeči. Implementace tohoto prvku na dotykových zařízeních je však stále náročný úkol. Vznášet se v CSS umožňuje přístup k obsahu na zařízeních, která nepodporují funkce vznášení. Bylo pozorováno, že aktivovaná funkce přechodu na nepodporujícím zařízení se může na zařízení zaseknout.

V důsledku toho je zásadní zobrazení zásadního obsahu blokováno prostřednictvím problému s formátováním. Na jedné straně, kde prvek přechodu v programu CSS naopak přispívá k vysoké úrovni efektivní personalizace webových stránek, je jeho provozuschopnost na mobilních zařízeních velmi spící. V závislosti na okolnostech, kdy svět informačních technologií roste v zásadě mobilním způsobem, může funkce přechodu zastarat technologickým pokrokem. Proto je nesmírně důležitá potřeba vytvořit přenosnou vestavěnou funkci, která pracuje s dotykovými a mobilními zařízeními.

Jak funguje Hover v CSS?

Aktivní styl pseudotřídy je dominantní při formátování přechodu CSS a přepíše jakýkoli / všechny následující odkazy, za kterými tato pseudotřída následuje. Například v pseudotřídě „: link: navštíveno, nebo: aktivní musí být pravidlo: hover umístěno za: link a: navštíveno, ale dříve: aktivní pro vhodný: hover styling. Pořadí LVHA:: odkaz,: vznášet se,: navštíveno a: aktivní se používá jako reference pro styl formátování správného: vznášet se.

jak používat třídění c ++

div {background-color: green padding: 18px display: none} span: hover + div {display: block}Test vznášení se!Skrytý kód se zobrazí při najetí myší

Ve výše uvedeném kódu je prvek span upraven tak, aby sloučil prvek přechodu a div pomocí využití prvku span: hover + div. Prvek span, který se zobrazí na primární vstupní webové stránce, zobrazí text „Hover test!“ Další najetí myší na prvek rozsahu odhalí prvek div „Skrytý kód se zobrazí při přechodu myší“. Tento formát pro vkládání je funkční jak pro text, tak pro obrázky.

Umístit kurzor na barvu pozadí na „červenou“

p: hover, h1: hover, a: hover {barva pozadí: červená}
Umístěte ukazatel myši na červenou
 
Umístěte ukazatel myši na červenou
 
Odkazy:
 
Hover Test Red:
  Google com  
  Poznámka: Ahoj
 

Výše uvedený kód upravuje

,

a prvek a integruje je do společné funkce přechodu. Tento kód je navržen tak, aby změnil barvu textu na červenou, když nad nimi ukazatel myši najede. Komponenty h1 a h2 zobrazují „CSS: Testovací kód vznášející se“ a „Vznášející se červená“. Prvek odstavce: Červený testovací značka a značka ukotvení: google.com se zvýrazní červeně, když nad nimi umístíte ukazatel myši.

Vytváření krytí vznášení na obrázcích

.pic {width: 1900px height: 1900px opacity: 1 filter: alpha (opacity = 100) background: url (https://cdn.pixabay.com/photo/2013/07/13/11/29/orange-158258_1280. png) no-repeat} .pic: hover {krytí: 0,2 filtr: alfa (krytí = 30)}

Výše uvedený program CSS zobrazuje změnu zakalení obrázku při vznášení. Původní neprůhlednost obrázku je jeden avšak s využitím filtru vznášejícího se krytí byl stejný upraven na 0,2. Tento kód zobrazuje, že použitím elementu přechodu lze upravit neprůhlednost obrázku a / nebo textu.

Vytváření překrytí textu na obrázcích

.pic {šířka: 4000px výška: 2170px pozadí: url (http://eatlogos.com/food_and_drinks/png/vector_orange_logo.png) no-repeat} .text {šířka: 3400px výška: 2170px pozadí: #FFF neprůhlednost: 0} .pic: hover .text {neprůhlednost: 0,6 zarovnání textu: zarovnat barvu: # 000000 velikost písma: 20px velikost písma: 700 rodina písma: 'Times New Roman', Times, výplň patky: 30p}} Orange je vlákno bohaté ovoce. Antioxidanty přítomné v pomeranči mohou pomoci při trávení, rozzářit pokožku a působit jako prvek proti stárnutí.

Vrstvení textu v přechodu CSS je efektivní nástroj pro vložení popisného textu obrázku do samotného obrázku. Tento nástroj pomáhá poskytovat kompaktní přehled o obrázku, aniž by zabral omezený prostor v omezeném prostoru pro návrh webových stránek. V tomto kódu je obrázek na pozadí vložen s popisným textem, který se zobrazí, když ukazatel myši umístí ukazatel nad text.

Tím se uzavírají všechny důležité aspekty přechodu v CSS a zdůrazňuje se jeho použitelnost při vývoji webu. Existuje mnoho speciálních efektů, které může přinést na naše webové stránky. Vždy můžeme vyzkoušet různé kombinace selektoru přechodu s dalšími vlastnostmi CSS, jako jsou animace, obrázky na pozadí, hypertextové odkazy atd., A prozkoumat jeho potenciál, jak jsme viděli v některých našich příkladech. A konečně, CSS je jedním z nejúčinnějších způsobů, jak navrhovat a transformovat webové stránky, a proto je bezprostřední, aby vývojáři webu získali tuto dovednost za účelem vytváření dynamických webových stránek.

Podívejte se na naše který přichází s živým tréninkem vedeným instruktorem a zkušenostmi z reálného projektu. Toto školení vám umožní ovládat dovednosti práce s webovými technologiemi typu back-end a front-end. Zahrnuje školení na Web Development, jQuery, Angular, NodeJS, ExpressJS a MongoDB.

Máte na nás dotaz? Uveďte to prosím v sekci komentářů blogu „Umístěte kurzor na CSS“ a my se vám ozveme.