CSS (CSS) on suunniteltu käyttämällä tai XML-muoto (mukaan lukien XHTML, SVG). Se on tyylitaulukieli, jota käytetään ensisijaisesti elementtien kuvaamiseen monipuolisten muotoilumenetelmien avulla. Yksi menetelmistä on leijuu, ja tässä artikkelissa ymmärrämme Hover CSS: ssä seuraavalla tavalla:

• Mikä on hiiri CSS: ssä?
• Missä leijua käytetään?
• Mitä Hover tekee?
• Yhteensopivuus
• Kuinka se toimii?
• Vie hiiren taustavärin vaihto punaiseksi
• Hover-peittävyyden luominen kuville
• Tekstin peittokuvan luominen kuville

Mikä on hiiri CSS: ssä?

CSS-hover on valitsinkomponentti, jota käytetään eri elementtien muotoiluun, kun hiiren osoitin leijuu niiden päälle. Niitä voidaan käyttää melkein jokaisessa HTML-elementissä. CSS: n hover-ominaisuudella on huomattava merkitys verkkosivujen suunnittelussa.

Leijukomponentti voi korostaa, koodata ja mukauttaa verkkosivuja käyttäjän mieltymysten mukaisesti kompaktissa ja tehokkaassa verkkosuunnitteluohjelmassa.

Missä leijua käytetään?

Yleisimpiä esimerkkejä hover-ominaisuuden elinkelpoisuudesta voidaan tuoda esiin suurimmilla ostosivustoilla, kuten Flipkart ja Amazon. Kun käyttäjät vievät hiiren minkä tahansa tuotteen päälle näillä verkkokauppasivustoilla, tuote on ohjelmoitu suorittamaan automaattinen zoom-hover-toiminto, jotta asiakas saa paremman kuvan valitsemistaan ​​tuotteista. Tämän ohjelmoinnin avulla verkkosivu on suunniteltu näyttämään kompakti näkymä koko tuotevalikoimasta ja yksityiskohtainen näkymä kiinnostavasta tuotteesta yhdessä verkkosivun suunnittelussa.

Mitä Hover tekee?

Hover on monitoiminen ohjelmointityökalu, jonka avulla käyttäjä voi muokata kohde-elementtiä loputtomalla määrällä muotoilukriteerejä. Joitakin esimerkkejä leiju-ominaisuuden toiminnallisesta osaamisesta ovat:

• Taustan / kirjasimen värin muuttaminen
• Piilotetun tekstin upottaminen osoittimen päälle
• Luo rullaefektejä kuviin
• Automaattinen zoomaus tekstissä / kuvissa
• Muokkaa kuvan peittävyyttä
• Tekstin upottaminen
• Kuvanvaihto
• Div. Vie hiiri
• Useita muita CSS-hiiren muotoilutoimintoja.

Leijuva vaikutus muuttaa periaatteessa elementin ominaisuusarvoa animoimaan muutokset ilmoitettuun tekstiin / kuvaan tai vastaaviin elementteihin. CSS-hover-elementtien upottaminen verkkosivujen suunnitteluun muuttaa tavallisen verkkosivun interaktiiviseksi, vankaksi ja erittäin toimivaksi verkkosivuksi. Nämä verkkosivujen mallit ovat käyttäjäystävällisiä ja kattavia. Hoverilla suunnitellut verkkosivut houkuttelevat enemmän kuluttajia ja houkuttelevat potentiaalisia asiakkaita huomaamaan.

Hoverin yhteensopivuus CSS: ssä

Hover-ominaisuus on yhteensopiva kaikkien tärkeimpien selainten kanssa. Tämän elementin käyttöönotto kosketuslaitteissa on kuitenkin edelleen haastava tehtävä. CSS: ssä oleva hiiri mahdollistaa sisällön saatavuuden laitteissa, jotka eivät tue leijuntatoimintoja. On havaittu, että ei-tukevan laitteen aktivoitu leijutoiminto voi jumittua laitteeseen.

Tämän vuoksi tärkeän sisällön elintärkeä näyttö estetään muotoilukysymyksen kautta. Toisaalta, kun CSS-ohjelman hiiren elementti edistää verkkosivujen tehokasta personointia korkealla tasolla, sen käyttö mobiililaitteilla on erittäin lepotilassa. Odotettaessa olosuhteita, joissa tietotekniikkamaailma kasvaa huomattavasti liikkuvaksi, leijumisominaisuus saattaa vanhentua tekniikan kehityksen myötä. Siksi tarve valmistaa kannettava sulautettu ominaisuus, joka toimii kosketus- ja mobiililaitteiden kanssa, on äärimmäisen tärkeää.

Kuinka Hover toimii CSS: ssä?

Aktiivinen pseudoluokan tyyli on hallitseva CSS-hover-muotoilussa ja se ohittaa kaikki / kaikki seuraavat linkit, joita tämä pseudoluokka seuraa. Esimerkiksi pseudoluokassa “: link: käynyt, tai: aktiivisena: hover-sääntö on sijoitettava jälkeen: link ja: käynyt, mutta ennen: aktiivinen sopivaan: hover-tyyliin. LVHA-järjestystä:: linkki,: hover,: käynyt ja: aktiivinen käytetään viitteenä oikeaan: hover-muotoilutyyliin.

tulosta_r ()

div {taustaväri: vihreä täyte: 18 kuvapisteen näyttö: ei mitään} alue: hover + div {näyttö: esto}Hover-testi!Piilotettu koodi näkyy hiirellä

Yllä olevassa koodissa span-elementtiä muunnetaan yhdistämään leiju- ja div-elementit hyödyntämällä span: hover + div -elementtiä. Ensisijaisella laskeutumissivulla näkyvä span elementti näyttää tekstin 'Hover test!' Edelleen leijuttamalla span-elementillä paljastuu div-elementti “Hidden code shows on hover”. Tämä upotusmuoto toimii sekä tekstissä että kuvissa.

Vie hiiren taustavärin vaihto punaiseksi

p: hover, h1: hover, a: hover {taustaväri: punainen}
Vie hiiri punaiseksi
 
Vie hiiri punaiseksi
 
Linkit:
 
Hover-testi punainen:
  Google com  
  Huomautus: Hei
 

Yllä oleva koodi mukauttaa

,

ja ja integroi ne yhteiseen leijutoimintoon. Tämä koodi on suunniteltu muuttamaan tekstin väri punaiseksi, kun hiiren osoitin leijuu niiden päälle. Komponentissa h1 ja h2 näkyy “CSS: Hover Test Code” ja “Hover Red”. Kappaleelementti: Hover Test Red ja ankkuritagi: google.com korostetaan punaisella, kun hiiren osoitin leijuu niiden päälle.

Hover-peittävyyden luominen kuville

.pic {width: 1900px height: 1900px opasiteetti: 1 suodatin: alfa (opasiteetti = 100) tausta: url (https://cdn.pixabay.com/photo/2013/07/13/11/29/orange-158258_1280. png) no-repeat} .pic: hover {opasiteetti: 0,2 suodatin: alfa (opasiteetti = 30)}

Yllä oleva CSS-ohjelma näyttää kuvan peittävyyden muokkaamisen leijuessa. Kuvan alkuperäinen peittävyys on yksi Kuitenkin opasiteetin hover-suodattimen avulla sama on muutettu arvoon 0,2. Tämä koodi osoittaa, että käyttämällä leijuuelementtiä voidaan muuttaa kuvan ja / tai tekstin peittävyyttä.

Tekstin peittokuvan luominen kuville

.pic {width: 4000px height: 2170px background: url (http://eatlogos.com/food_and_drinks/png/vector_orange_logo.png) no-repeat} .text {leveys: 3400px korkeus: 2170px tausta: #FFF peittävyys: 0} .pic: hover .text {peittävyys: 0.6 text-align: oikeuta väri: # 000000 font-size: 20px font-weight: 700 font-family: 'Times New Roman', Times, serif-täyte: 30px} Oranssi on kuitu rikas hedelmä. Oranssissa olevat antioksidantit voivat auttaa ruoansulatuksessa, saada ihon hehkumaan ja toimimaan ikääntymistä estävänä elementtinä.

CSS-hiiren tekstikerros on tehokas työkalu upottamaan kuvan kuvaava teksti itse kuvaan. Tämän työkalun avulla saadaan kompakti yleiskuva kuvasta viemättä lepotilaa rajalliseen verkkosuunnittelutilaan. Tässä koodissa taustakuva on upotettu kuvaavaan tekstiin, joka näkyy, kun hiiren osoitin vie tekstin päälle.

Tämä lopettaa kaikki CSS: n osoittamisen tärkeät näkökohdat ja korostaa sen käytettävyyttä verkkokehityksessä. Se voi tuoda verkkosivuillemme monia erikoistehosteita. Voimme aina kokeilla hiiren valitsimen erilaisia ​​yhdistelmiä muiden CSS-ominaisuuksien, kuten animaation, taustakuvien, hyperlinkkien jne. Kanssa, ja tutkia sen potentiaalia, kuten näimme joissakin esimerkeissämme. Lopuksi, CSS on yksi tehokkaimmista tavoista suunnitella ja muuttaa verkkosivuja, joten web-kehittäjien on välittömästi hankittava tämä taito dynaamisten verkkosivujen rakentamiseksi.

Katso meidän joka sisältää ohjaajan vetämän live-koulutuksen ja tosielämän projektikokemuksen. Tämä koulutus antaa sinulle taitoja työskennellä back-end- ja front-end-verkkoteknologioiden kanssa. Se sisältää koulutusta verkkokehityksestä, jQuery, Angular, NodeJS, ExpressJS ja MongoDB.

Onko sinulla kysymys meille? Mainitse se 'Hover in CSS' -blogin kommenttiosassa ja palaamme sinuun.