Kā ieviest kursoru CSS ar piemēriem



Šis raksts sniegs jums detalizētas un visaptverošas zināšanas par to, kā ieviest kursoru CSS ar piemēriem.

Kaskādes stila lapas (CSS) ir veidotas, izmantojot vai XML (ieskaitot XHTML, SVG) formātu. Tā ir stila lapas valoda, ko galvenokārt izmanto, lai aprakstītu elementus, izmantojot dažādas formatēšanas metožu sērijas. Viena no metodēm ir novirzīta, un šajā rakstā mēs saprotam kursoru CSS šādā veidā:

Kas CSS ir kursors?

CSS kursors ir atlasītāja komponents, kas tiek izmantots dažādu elementu veidošanai, kad peles rādītājs virzās virs tiem. Tos var izmantot gandrīz visos HTML elementos. CSS iezīmei ir liela nozīme tīmekļa lapu projektēšanā.





Virziet kursoru CSS

Kompaktā un efektīvā tīmekļa dizaina programmā kursora komponents var izcelt, kodēt un pielāgot tīmekļa lapas atbilstoši lietotāja vēlmēm.



Kur tiek izmantots kursors?

Visizplatītākos kursora funkcijas dzīvotspējas piemērus var izcelt lielākajās iepirkšanās vietnēs, piemēram, Flipkart un Amazon. Kad lietotāji lido uz jebkura produkta šajās e-komercijas vietnēs, produkts ir ieprogrammēts veikt automatizētu tālummaiņas virzīšanas funkciju, lai klientam sniegtu labāku priekšstatu par viņu izvēlētajiem produktiem. Izmantojot šo programmēšanu, tīmekļa lapa ir paredzēta, lai parādītu kompaktu visa produktu klāsta skatu, kā arī detalizētu interesējošā produkta skatu vienā tīmekļa lapas dizainā.

Ko dara kursors?

Hover ir daudzfunkcionāls programmēšanas rīks, ar kura palīdzību lietotājs var pielāgot mērķa elementu ar nebeidzamu skaitu formatēšanas kritēriju. Daži no kursora funkcijas operatīvās zinātības gadījumiem ir šādi:

atrast lielāko skaitu java
  • Mainot fona / fonta krāsu
  • Iekļauts slēptais teksts, kas tiek parādīts kursora kursorā
  • Izveidojiet attēla apgriešanas efektus
  • Automātiska teksta / attēlu tālummaiņa
  • Mainīt attēla necaurredzamību
  • Teksta iegulšana
  • Attēlu maiņa
  • Div. Virziet kursoru
  • Vairākas citas CSS virzīšanas formatēšanas operācijas.

Hover efekts būtībā maina elementa rekvizīta vērtību, lai aktivizētu izmaiņas norādītajā tekstā / attēlā vai attiecīgajos elementos. CSS virzīšanas elementu iegulšana tīmekļa lapas noformējumā parasto tīmekļa lapu pārveido par interaktīvu, izturīgu un ļoti funkcionālu tīmekļa lapu. Šie tīmekļa lapu noformējumi ir lietotājam draudzīgi un visaptveroši. Vietnes, kas izveidotas, virzot kursoru, satur lielāku patērētāju pievilcību, un tās vilina potenciālo klientu uzmanību.



Hover saderība CSS

Hover funkcija ir saderīga ar visām galvenajām tīmekļa pārlūkprogrammām. Tomēr šī elementa ieviešana skārienierīcēs joprojām ir sarežģīts uzdevums. CSS kursors nodrošina satura pieejamību ierīcēs, kas neatbalsta kursora funkcijas. Ir novērots, ka uz neatbalstošās ierīces aktivizēta kursora funkcija var iestrēgt ierīcē.

Līdz ar to svarīga satura vitāli svarīga attēlošana tiek bloķēta, izmantojot formatēšanas problēmu. No vienas puses, ja kursora elements CSS programmā veicina ļoti efektīvu tīmekļa lapu personalizēšanu, gluži pretēji, tā darbība mobilajās ierīcēs ir ļoti pasīva. Atdodoties apstākļiem, kad informācijas tehnoloģiju pasaule ievērojami pieaug, pārvietošanās iezīme var novecot ar tehnoloģisko attīstību. Tāpēc ārkārtīgi izšķiroša ir nepieciešamība izgatavot pārnēsājamu iegulto funkciju, kas darbojas ar pieskārienu un mobilajām ierīcēm.

Kā kursors darbojas CSS?

CSS kursoru formatēšanā dominējošais ir aktīvais pseidoklases stils, un tas ignorē visas / visas turpmākās saites, kurām seko šī pseidoklase. Piemēram, pseidoklasē “: saite: apmeklēts vai: aktīvs: likme“ lidināties ”ir jānovieto aiz: saite un: apmeklēta, bet pirms: aktīva, lai piemērotu: virzītu virzienu. LVHA pasūtījums:: saite,: virzīt kursoru,: apmeklēts un aktīvs tiek izmantots kā atsauce pareizam: virzīt kursoru formatēšanas stilam.

java pārveidot no dubultā uz int
div {background-color: green padding: 18px display: none} span: hover + div {display: block}Pārbaude ar peles kursoruSlēptais kods tiek parādīts kursora kursorā

Iepriekš minētajā kodā span elements tiek modificēts, lai apvienotu hover un div elementu, izmantojot span: hover + div elementu. Span elementā, kas tiks parādīts galvenajā galvenajā tīmekļa lapā, tiks parādīts teksts “Pārvietošanas virziena pārbaude!” Turpmāk virzot kursoru uz laiduma elementa, tiek atklāts div elements “Slēptais kods tiek parādīts kursorā”. Šis iegulšanas formāts darbojas gan tekstā, gan attēlos.

Virziet kursoru uz fona krāsas maiņas uz “sarkanu”

p: hover, h1: hover, a: hover {fona krāsa: sarkans}

Virziet kursoru sarkanā krāsā

Virziet kursoru sarkanā krāsā

Saites:

Pārvietošanas kursors sarkanā krāsā:

Google com

Piezīme: Sveiki

Iepriekš minētais kods pielāgo

,

un elementu un integrē tos kopējā kursora funkcijā. Šis kods ir paredzēts, lai mainītu teksta krāsu uz sarkanu, kad peles kursors virzās virs tā. H1 un h2 komponentā attiecīgi tiek parādīts “CSS: Hover Test Code” un “Hover Red”. Rindkopas elements: Pārvietojiet peles kursora sarkano un enkura tagu: google.com tiek izcelts sarkanā krāsā, kad peles kursors virzās virs tiem.

Veidojot kursora necaurredzamību attēlos

.pic {width: 1900px height: 1900px necaurredzamība: 1 filtrs: alfa (necaurredzamība = 100) background: url (https://cdn.pixabay.com/photo/2013/07/13/11/29/orange-158258_1280. png) no-repeat} .pic: virziet kursoru {necaurredzamība: 0,2 filtrs: alfa (necaurredzamība = 30)}

Iepriekš CSS programma parāda attēla necaurredzamības modināšanu, kad kursors atrodas. Attēla sākotnējā necaurredzamība ir viens tomēr, izmantojot necaurredzamības kursora filtru, tas pats ir mainīts uz 0,2. Šis kods parāda, ka, izmantojot kursora elementu, var mainīt attēla un / vai teksta necaurredzamību.

Teksta pārklājuma izveidošana attēliem

.pic {width: 4000px height: 2170px background: url (http://eatlogos.com/food_and_drinks/png/vector_orange_logo.png) no-repeat} .text {width: 3400px height: 2170px background: #FFF necaurredzamība: 0} .pic: hover .text {necaurredzamība: 0.6 text-align: justify color: # 000000 font-size: 20px font-weight: 700 font-family: 'Times New Roman', Times, serif padding: 30px} Apelsīns ir šķiedra bagāti augļi. Apelsīnā esošie antioksidanti var palīdzēt gremošanā, padarīt ādu mirdzošu un darboties kā pretnovecošanās elements.

Teksta slāņošana CSS kursorā ir efektīvs rīks, lai iegultu attēla aprakstošo tekstu pašā attēlā. Šis rīks palīdz nodrošināt kompaktu attēla pārskatu, neaizņemot mierīgu vietu ierobežotā tīmekļa dizaina telpā. Šajā kodā fona attēls ir iestrādāts ar aprakstošu tekstu, kas tiek parādīts, kad peles rādītājs virzās virs teksta.



Tas noslēdz visus svarīgos CSS kursora aspektus un uzsver tā lietojamību tīmekļa izstrādē. Ir daudz specefektu, kurus tā var ienest mūsu tīmekļa lapās. Mēs vienmēr varam izmēģināt dažādas kursora atlasītāja kombinācijas ar citām CSS īpašībām, piemēram, animāciju, fona attēliem, hipersaitēm utt., Un izpētīt tā potenciālu, kā redzējām dažos no mūsu piemēriem. Visbeidzot, CSS ir viens no spēcīgākajiem veidiem, kā veidot un pārveidot tīmekļa lapas, tāpēc tīmekļa izstrādātājiem ir neizbēgami jāiegūst šī prasme, lai izveidotu dinamiskas tīmekļa lapas.

Pārbaudiet mūsu kas nāk ar instruktoru vadītu tiešraides apmācību un reālās dzīves projektu pieredzi. Šīs apmācības ļauj jums prasmīgi strādāt ar back-end un front-end tīmekļa tehnoloģijām. Tas ietver apmācību par Web izstrādi, jQuery, Angular, NodeJS, ExpressJS un MongoDB.

iteratora izmantošana java

Vai mums ir jautājums? Lūdzu, pieminējiet to emuāra “Hover in CSS” komentāru sadaļā, un mēs ar jums sazināsimies.