CSS skirtingiems HTML elementams naudojami įvairių tipų žymekliai, o norint pakeisti žymeklio tipą, „ žymeklį “ naudojamas turtas. Tai leidžia pakeisti žymeklio tipą ir nustatyti žymeklio, kurį norite rodyti ekrane, reikšmę. Kaip papildoma funkcija, ji taip pat leidžia nustatyti savo žymeklio vaizdą.

Šiame vadove sužinosite:

• Kas yra žymeklio CSS nuosavybė
• Kaip pakeisti žymeklį į vaizdą „Hover“ naudojant CSS

Taigi, pradėkime!

Kas yra „žymeklio“ CSS nuosavybė?

Norėdami valdyti pelės žymeklį ant HTML elemento, „ žymeklį “ gali būti naudojama CSS nuosavybė. Tai leidžia pakeisti įprastą žymeklį į skirtingus tipus, pvz., kopijavimo žymeklį, rankinį žymeklį, griebtuvą ir daug daugiau. Taip pat galite nustatyti savo pasirinktinį žymeklį, žymeklio ypatybėje nustatydami vaizdo URL.

Sintaksė

Žymeklio ypatybės sintaksė pateikiama taip:

Aukščiau pateiktoje sintaksėje priskirkite vaizdo kelią „ url() “, kurį norite rodyti ekrane.

Dabar pereisime prie pavyzdžio, norėdami pakeisti įprastą žymeklį į vaizdą užvedus pelės žymeklį.

Kaip pakeisti žymeklį į vaizdą ant pelės žymeklio naudojant CSS?

Norėdami pakeisti žymeklį į vaizdą užvedus pelės žymeklį, pirmiausia pridėkite elementą į HTML.

1 pavyzdys: žymeklio pakeitimas į vaizdą ant pelės žymeklio naudojant žymeklio ypatybę

Sukursime antraštę

ir mygtuko klasės pavadinimą “ btn “.

HTML

< kūnas >
< h1 > Pakeiskite žymeklį į Image on Hover h1 >
< mygtuką klasė = 'btn' > Paspausk mane mygtuką >
kūnas >

Šiuo metu užvedus pelės žymeklį ant mygtuko bus rodomas numatytasis žymeklis:

Dabar pereikite prie CSS ir pakeiskite žymeklį į vaizdą.

Tada nustatykite vaizdo kelią „ url() “. Pavyzdžiui, mes nurodėme „i su.svg “ kaip mūsų pasirinktas vaizdas. Tada nustatykite žymeklio ypatybės reikšmę kaip ' automatinis “.

CSS

.btn {
žymeklis: url ( icon.svg ) , automatinis;
pamušalas: 10px;
}

Išsaugokite aukščiau pateiktą kodą ir paleiskite HTML failą, kad pamatytumėte tokį rezultatą:

Pateikta išvestis rodo, kad žymeklis sėkmingai pakeistas į vaizdą užvedus pelės žymeklį.

Pastaba: “ automatinis “ yra naudojamas kaip alternatyvi parinktis žymeklio savybėje; kai vaizdas neįkeliamas arba trūksta failo kelio ar paties failo, ekrane rodoma numatytoji piktograma dėl automatinės reikšmės.

2 pavyzdys: Numatytojo žymeklio nustatymas ant užvedimo

Pavyzdžiui, mes suteiksime vaizdo URL ir tik nustatysime žymeklio ypatybės reikšmę kaip ' automatinis “:

žymeklis: url ( ) , automatinis;

Dėl to žymeklis nepasikeis užvedus pelės žymeklį virš mygtuko:

3 pavyzdys: Vaizdo alternatyvos nustatymas užvedus pelės žymeklį

Vietoj automatinio galite nustatyti skirtingas žymeklio reikšmes, kurias norite rodyti kaip alternatyvą vaizdui. Pavyzdžiui, mes pakeisime žymeklio ypatybės reikšmę iš „ automatinis 'į' rodyklė “:

žymeklis: url ( ) , rodyklė;

Kaip matote toliau pateiktoje išvestyje, žymeklis pakeičiamas į rankinę rodyklę, kai jis užvedamas virš mygtuko:

Pateikėme lengviausią būdą pakeisti žymeklio vaizdą užvedus pelės žymeklį naudojant CSS.

Išvada

CSS galite pakeisti žymeklį į vaizdą užvedus pelės žymeklį naudodami „ žymeklį ' nuosavybė. Tai leidžia pakeisti įprastą žymeklį į vaizdą, priskiriant „ url “ į žymeklio ypatybę. Galite pritaikyti bet kokio tipo žymeklį, kurį norite rodyti, kai jis užves ant elemento. Šiame straipsnyje parodytas būdas pakeisti žymeklį į rankinį žymeklį.