Cascading Style Sheets (CSS) er designet ved hjælp af eller XML (inklusive XHTML, SVG) format. Det er et stilark sprog, der primært bruges til at beskrive elementer gennem en række forskellige formateringsmetoder. En af metoderne svæver og i denne artikel vil vi forstå Hover i CSS på følgende måde:

hvad er funktion i sql

• Hvad er svejsning i CSS?
• Hvor bruges svæver?
• Hvad gør Hover?
• Kompatibilitet
• Hvordan virker det?
• Hold musen over skift af baggrundsfarve til “rød”
• Oprettelse af svævende opacitet på billeder
• Oprettelse af tekstoverlay på billeder

Hvad er svejsning i CSS?

CSS svæver er en vælgerkomponent, der bruges til at style forskellige elementer, når musemarkøren svæver over dem. De kan bruges på næsten ethvert HTML-element. Hover-funktionen i CSS har stor betydning i design af websider.

Hovedkomponenten kan fremhæve, kode og tilpasse websider efter brugerens præference i et kompakt og effektivt webdesignprogram.

Hvor bruges svæver?

De mest almindelige eksempler på levedygtigheden af ​​svævefunktionen kan fremhæves på større shoppingwebsteder som Flipkart og Amazon. Når brugere svæver over et hvilket som helst produkt på disse e-handelswebsteder, er produktet programmeret til at udføre en automatisk zoom-svæverfunktion for at give kunden et bedre overblik over deres valgte produkter. Gennem denne programmering er websiden designet til at vise en kompakt visning af hele produktprogrammet ledsaget af en detaljeret oversigt over det produkt, der er interesseret i et enkelt webdesign.

Hvad gør Hover?

Hover er et multifunktionelt programmeringsværktøj, hvorigennem brugeren kan tilpasse målelementet med et uendeligt antal formateringskriterier. Nogle tilfælde af svævefunktionens operationelle know-how inkluderer:

• Ændring af baggrunds- / skrifttypefarve
• Integrering af skjult tekst, der vises på svejsning
• Opret overgangseffekter på billeder
• Automatiseret zoom på tekst / billeder
• Rediger billedopacitet
• Indlejring af tekst
• Billedbytte
• Div. Hold markøren
• Flere andre CSS Hover-formateringsoperationer.

Hover-effekten ændrer grundlæggende egenskabsværdien af ​​et element for at aktivere animationer af ændringer til en angivet tekst / et billede eller de respektive elementer. Indlejringen af ​​CSS-svæveelementer i et webdesign forvandler en almindelig webside til en interaktiv, robust og yderst funktionel webside. Disse websidesign er brugervenlige og omfattende. Hover-designede websider indeholder en højere forbrugerappel, og de lokker besked fra potentielle kunder.

Kompatibilitet med svæver i CSS

Pegefunktionen er kompatibel med alle større webbrowsere. Implementeringen af ​​dette element på berøringsenheder er dog stadig en udfordrende opgave. Svævningen i CSS muliggør indholdstilgængelighed på enheder, der ikke understøtter svævefunktioner. Det er blevet observeret, at en aktiveret svæverfunktion på den ikke-understøttende enhed kan sidde fast på enheden.

Derfor blokeres den vitale visning af afgørende indhold gennem formateringsproblemet. På den ene side, hvor svæveelementet i CSS-programmet bidrager med et stort niveau af effektiv personalisering til websider omvendt, er dets betjening på mobile enheder meget sovende. Svævefunktionen, der kapitulerer over for omstændighederne, hvor informationsteknologiens verden vokser betydeligt mobil, risikerer at blive forældet med teknologiske fremskridt. Derfor er behovet for at fremstille en bærbar integreret funktion, der fungerer med berørings- og mobile enheder, yderst afgørende.

Hvordan fungerer Hover i CSS?

Den aktive pseudoklassestil er dominerende i CSS-svæveformatering, og den tilsidesætter ethvert / alle efterfølgende link, der efterfølges af denne pseudoklasse. For eksempel i pseudoklasse “: link: besøgt eller: aktiv skal: svæverreglen placeres efter: link og: besøgte, men før: aktiv for passende: svæver-styling. LVHA-ordren:: link,: svæver,: besøgte og: aktiv bruges som en reference til korrekt: svæver formateringsstil.

div {baggrundsfarve: grøn polstring: 18 pixel display: ingen} span: hover + div {display: block}Hover Test!Skjult kode vises, når du holder markøren

I ovenstående kode ændres span-elementet til at flette svæver- og div-elementet ved at bruge span: hover + div-element. Spanelementet, der vises på den primære destinationswebside, viser teksten 'Hover test!' Yderligere svævning på span-elementet afslører div-elementet 'Skjult kode vises på svævningen'. Dette indlejringsformat fungerer både på teksten og på billederne.

Hold musen over skift af baggrundsfarve til “rød”

p: svæver, h1: svæver, a: svæver {baggrundsfarve: rød}
Hold markøren rød
 
Hold markøren rød
hvordan man indstiller klassesti i Windows 10
 
Links:
 
Hover Test Red:
  Google com  
  Bemærk: Hej
 

Ovenstående kode tilpasser

,

og element og integrerer dem i en fælles svæverfunktion. Denne kode er designet til at ændre tekstfarven til rød, når musemarkøren svæver over dem. Komponenten h1 og h2 viser henholdsvis “CSS: Hover Test Code” og “Hover Red”. Afsnitselementet: Hover Test Red og ankertag: google.com fremhæves med rødt, når musemarkøren svæver over dem.

Oprettelse af svævende opacitet på billeder

.pic {bredde: 1900px højde: 1900px opacitet: 1 filter: alpha (opacity = 100) baggrund: url (https://cdn.pixabay.com/photo/2013/07/13/11/29/orange-158258_1280. png) ingen gentagelse}. billede: svæver {opacitet: 0,2 filter: alpha (opacitet = 30)}

Ovenstående CSS-program viser ændringen af ​​et billedes uigennemsigtighed, når det svæver. Billedets originale opacitet er en ved at bruge det opacitets svævende filter er det samme imidlertid blevet ændret til 0,2. Denne kode viser, at man ved at bruge svæveelementet kan ændre opaciteten af ​​et billede og / eller tekst.

Oprettelse af tekstoverlay på billeder

.pic {bredde: 4000px højde: 2170px baggrund: url (http://eatlogos.com/food_and_drinks/png/vector_orange_logo.png) nej-gentag} .tekst {bredde: 3400px højde: 2170px baggrund: #FFF opacitet: 0} .pic: hover .text {opacity: 0.6 text-align: justify color: # 000000 font-size: 20px font-weight: 700 font-family: 'Times New Roman', Times, serif padding: 30px} Orange er en fiber rig frugt. De antioxidanter, der findes i en appelsin, kan hjælpe med fordøjelsen, få huden til at gløde og fungere som et anti-aldringselement.

Tekstlagdeling i CSS-svæver er et effektivt værktøj til at integrere billedets beskrivende tekst i selve billedet. Dette værktøj hjælper med at give et kompakt overblik over billedet uden at tage en hvilende plads i et begrænset webdesignende rum. I denne kode er baggrundsbilledet indlejret med en beskrivende tekst, der vises, når musemarkøren svæver over teksten.

Dette afslutter alle de vigtige aspekter af svævning i CSS og fremhæver dets anvendelighed i webudvikling. Der er mange specielle effekter, som det kan bringe ind på vores websider. Vi kan altid prøve forskellige kombinationer af svævevælgeren med andre CSS-egenskaber som animation, baggrundsbilleder, hyperlinks osv. Og udforske dets potentiale, som vi så i nogle af vores eksempler. Endelig er CSS en af ​​de mest kraftfulde måder at designe og transformere websider på, og det er derfor overhængende for webudviklere at tilegne sig denne færdighed for at opbygge dynamiske websider.

hvordan man genererer tilfældig streng i java

Tjek vores som kommer med instruktørstyret live træning og projektoplevelse i det virkelige liv. Denne træning gør dig dygtig til at arbejde med back-end og front-end webteknologier. Det inkluderer træning i webudvikling, jQuery, Angular, NodeJS, ExpressJS og MongoDB.

Har du et spørgsmål til os? Nævn det i kommentarfeltet på 'Hold musen i CSS' -blog, så vender vi tilbage til dig.