Kaskádové štýly (CSS) sú navrhnuté pomocou technológie alebo XML (vrátane XHTML, SVG). Jedná sa o jazyk šablón štýlov, ktorý sa primárne používa na popis prvkov pomocou rozmanitej série metód formátovania. Jedna z metód sa vznáša a v tomto článku budeme chápať ukážku kurzora myši v CSS nasledujúcim spôsobom:

• Čo je to ukážka v CSS?
• Kde sa používa kurzor myši?
• Čo robí Hover?
• Kompatibilita
• Ako to funguje?
• Zmena farby pozadia kurzora myši na „červenú“
• Vytváranie nepriehľadnosti kurzora na obrázkoch
• Vytváranie prekrytia textu na obrázkoch

Čo je to ukážka v CSS?

Vznášanie CSS je selektorový komponent, ktorý sa používa na štýlovanie rôznych prvkov, keď na ne umiestnite kurzor myši. Môžu byť použité takmer na každom prvku HTML. Funkcia umiestnenia kurzora myši v CSS má podstatný význam pri navrhovaní webových stránok.

Komponent hover dokáže zvýrazniť, kódovať a prispôsobiť webové stránky podľa preferencií používateľa v kompaktnom a efektívnom programe na navrhovanie webových stránok.

Kde sa používa kurzor myši?

Najbežnejšie príklady životaschopnosti funkcie vznášania je možné zvýrazniť na hlavných webových stránkach zameraných na nakupovanie, ako sú Flipkart a Amazon. Keď používatelia umiestnia kurzor myši na akýkoľvek produkt na týchto webových stránkach elektronického obchodu, produkt je naprogramovaný tak, aby vykonával funkciu automatického priblíženia pomocou priblíženia, ktorá zákazníkom poskytne lepší prehľad o ich vybraných produktoch. Prostredníctvom tohto programovania je webová stránka navrhnutá tak, aby zobrazovala kompaktné zobrazenie celého sortimentu výrobkov spolu s podrobným pohľadom na požadovaný produkt v jedinom dizajne webovej stránky.

Čo robí Hover?

Vznášanie je multifunkčný programovací nástroj, prostredníctvom ktorého si používateľ môže prispôsobiť cieľový prvok pomocou nekonečného množstva kritérií formátovania. Niektoré prípady prevádzkového know-how týkajúcej sa funkcie umiestnenia kurzora myši zahŕňajú:

• Zmena farby pozadia / písma
• Vkladanie skrytého textu, ktorý sa zobrazuje pri umiestnení kurzora myši
• Vytvárajte efekty obnovenia obrazu
• Automatické zväčšenie textu / obrázkov
• Upravte nepriehľadnosť obrazu
• Vkladanie textu
• Zameniť obrázok
• Div. Vznášať sa
• Niekoľko ďalších formátovacích operácií umiestnenia kurzora myši.

Efekt vznášania v podstate upravuje hodnotu vlastnosti prvku tak, aby umožňoval animovať zmeny uvedeného textu / obrázka alebo príslušných prvkov. Vloženie prvkov vznášania CSS do dizajnu webovej stránky transformuje bežnú webovú stránku na interaktívnu, robustnú a vysoko funkčnú webovú stránku. Tieto návrhy webových stránok sú užívateľsky prívetivé a komplexné. Webové stránky umiestnené po umiestnení kurzora myši zvyšujú príťažlivosť pre spotrebiteľov a priťahujú pozornosť potenciálnych zákazníkov.

Kompatibilita kurzora myši v CSS

Funkcia umiestnenia kurzora myši je kompatibilná so všetkými hlavnými webovými prehľadávačmi. Implementácia tohto prvku na dotykových zariadeniach je však stále náročná úloha. Kurzor myši v CSS umožňuje prístup k obsahu na zariadeniach, ktoré nepodporujú funkcie kurzora. Zistilo sa, že aktivovaná funkcia vznášania na nepodporujúcom zariadení sa môže na zariadení zaseknúť.

V dôsledku toho je vitálne zobrazenie rozhodujúceho obsahu blokované prostredníctvom problému s formátovaním. Na jednej strane, kde prvok vznášania v programe CSS prispieva veľkou úrovňou efektívnej personalizácie webových stránok naopak, je jeho funkčnosť na mobilných zariadeniach veľmi nečinná. V závislosti na okolnostiach, v ktorých svet informačných technológií neustále rastie, je možné, že funkcia vznášania zastará technologickým pokrokom. Preto je mimoriadne dôležitá potreba vytvoriť prenosnú zabudovanú funkciu, ktorá pracuje s dotykovými a mobilnými zariadeniami.

Ako funguje Hover v CSS?

Aktívny štýl pseudotriedy je dominantný pri formátovaní vznášadla CSS a prepíše akýkoľvek nasledujúci odkaz, ktorý nasleduje po tejto pseudotriede. Napríklad v pseudotriede „: link: navštívené alebo: aktívne musí byť pravidlo: vznášať umiestnené za: odkaz a: navštívené, ale skôr: aktívne pre vhodný: vznášať sa. Poradie LVHA:: link,: hover,: navštívené a: active sa používa ako referencia pre správny štýl formátovania: hover.

ako používať triedenie c ++

div {farba pozadia: zelená výplň: 18px displej: žiadny} span: hover + div {display: block}Skúška umiestnením kurzora myši!Skrytý kód sa zobrazuje pri umiestnení kurzora myši

Vo vyššie uvedenom kóde je prvok span upravený tak, aby zlúčil prvok hover a div pomocou prvku span: hover + div. Element rozpätia, ktorý sa zobrazí na primárnej cieľovej webovej stránke, zobrazí text „Test umiestnenia kurzora myši!“ Ďalším podržaním kurzora na prvku rozpätia sa odhalí prvok div „Skrytý kód sa zobrazí pri vznášaní“. Tento formát vkladania je funkčný tak pre text, ako aj pre obrázky.

Zmena farby pozadia kurzora myši na „červenú“

p: hover, h1: hover, a: hover {farba pozadia: červená}
Umiestnite kurzor myši na červenú
 
Umiestnite kurzor myši na červenú
 
Odkazy:
 
Skúška vznášania Červená:
  Google com  
  Poznámka: Ahoj
 

Vyššie uvedený kód upravuje

,

a prvok a integruje ich do spoločnej funkcie vznášania. Tento kód slúži na zmenu farby textu na červenú, keď na ne umiestnite kurzor myši. Komponenty h1 a h2 zobrazujú „CSS: Testovací kód vznášadla“ a „Hover Red“. Prvok odseku: Červená testovacia značka a značka ukotvenia: google.com sa zvýrazní červenou farbou, keď na ne umiestnite kurzor myši.

Vytváranie nepriehľadnosti kurzora na obrázkoch

.pic {šírka: 1 900 pixelov výška: 1 900 pixelov opacita: 1 filter: alfa (opacita = 100) pozadie: adresa URL (https://cdn.pixabay.com/photo/2013/07/13/11/29/orange-158258_1280. png) no-repeat} .pic: hover {opacita: 0,2 filter: alfa (opacita = 30)}

Vyššie uvedený program CSS zobrazuje modifikáciu nepriehľadnosti obrázka pri vznášaní. Pôvodná nepriehľadnosť obrázka je jeden avšak s využitím filtra nepriehľadnosti vznášadla bolo to isté upravené na 0,2. Tento kód zobrazuje, že použitím prvku vznášania je možné upraviť nepriehľadnosť obrázka alebo textu.

Vytváranie prekrytia textu na obrázkoch

.pic {šírka: 4 000 pixelov výška: 2 170 pixelov pozadie: url (http://eatlogos.com/food_and_drinks/png/vector_orange_logo.png) no-repeat} .text {šírka: 3 400 pixelov výška: 2 170 pixelov pozadie: #FFF nepriehľadnosť: 0} .pic: hover .text {nepriehľadnosť: 0,6 zarovnanie textu: zarovnať farbu: # 000000 veľkosť písma: 20px veľkosť písma: 700 rodina písma: 'Times New Roman', Times, polstrovanie pätky: 30p}} Oranžová je vlákno bohaté ovocie. Antioxidanty prítomné v oranžovej farbe môžu pomôcť pri trávení, zosvetliť pokožku a pôsobiť ako anti-aging prvok.

Textové vrstvenie pri umiestnení kurzora CSS je efektívny nástroj na vloženie popisného textu obrázka do samotného obrázka. Tento nástroj pomáha pri poskytovaní kompaktného prehľadu o obrázku bez toho, aby zaberal nečinný priestor v obmedzenom priestore pre návrh webových stránok. V tomto kóde je obrázok na pozadí vložený s popisným textom, ktorý sa zobrazí, keď nad textom prejde kurzor myši.

Týmto sa uzatvárajú všetky dôležité aspekty vznášania sa v CSS a zdôrazňuje sa jeho použiteľnosť pri vývoji webu. Existuje mnoho špeciálnych efektov, ktoré môže priniesť na naše webové stránky. Vždy môžeme vyskúšať rôzne kombinácie selektora vznášania sa s inými vlastnosťami CSS, ako sú animácie, obrázky na pozadí, hypertextové odkazy atď., A preskúmať jeho potenciál, ako sme videli v niektorých našich príkladoch. A konečne, CSS je jedným z najsilnejších spôsobov, ako navrhnúť a transformovať webové stránky, a preto je bezprostredné, aby vývojári webu získali túto zručnosť pri vytváraní dynamických webových stránok.

Vyskúšajte naše ktorá prináša živé školenie vedené inštruktorom a skúsenosti s projektmi v reálnom živote. Toto školenie vám pomôže získať zručnosti v oblasti práce s webovými technológiami typu back-end a front-end. Zahŕňa školenie zamerané na vývoj webových aplikácií, jQuery, Angular, NodeJS, ExpressJS a MongoDB.

Máte na nás otázku? Uveďte to v sekcii komentárov na blogu „Umiestnite kurzor myši na CSS“ a my sa vám ozveme.