CSS:ssä käytetään erityyppisiä osoittimia eri HTML-elementeille, ja kohdistimen tyypin muuttamiseksi ' kohdistin ”kiinteistö on käytössä. Sen avulla voit muuttaa kohdistimen tyyppiä ja asettaa näytössä näkyvän kohdistimen arvon. Lisäominaisuutena sen avulla voit myös asettaa oman kohdistimen kuvan.

Tässä oppaassa opit:

• Mikä on kohdistimen CSS-ominaisuus
• Kuinka muuttaa kursori kuvaksi Hoverissa CSS:n avulla

Joten, aloitetaan!

Mikä on 'kursori' CSS-ominaisuus?

Jos haluat hallita hiiren ulkoasua HTML-elementin päällä, ' kohdistin ” CSS:n omaisuutta voidaan käyttää. Se mahdollistaa tavallisen kohdistimen muuttamisen eri tyypeiksi, kuten kopiointikohdistin, käsiosoitin, nappaus ja monet muut. Voit myös asettaa oman mukautetun kohdistimen asettamalla kuvan URL-osoitteen kohdistimen ominaisuudessa.

Syntaksi

Kohdistimen ominaisuuden syntaksi annetaan seuraavasti:

Määritä yllä annetussa syntaksissa kuvan polku ' url() ', jonka haluat näyttää näytöllä.

Siirrymme nyt esimerkkiin muuttaaksesi tavallisen kohdistimen kuvaksi, joka on päällä.

Kuinka muuttaa kursori kuvaksi Hoverissa CSS:n avulla?

Jos haluat muuttaa kohdistimen hiirellä olevaksi kuvaksi, lisää ensin elementti HTML:ään.

Esimerkki 1: Kohdistimen muuttaminen kuvaksi Hoverissa käyttämällä kohdistimen ominaisuutta

Luomme otsikon

ja painikkeen luokan nimen ' btn ”.

HTML

< kehon >
< h1 > Muuta kohdistin kuvaksi Hover h1 >
< -painiketta luokkaa = 'btn' > Napsauta Minä -painiketta >
kehon >

Tällä hetkellä hiiren pitäminen painikkeen päällä näyttää oletuskohdistimen:

Siirry nyt CSS:ään ja vaihda kursori kuvan kohdalle.

Aseta sitten kuvan polku ' url() ”. Olemme esimerkiksi määrittäneet 'i with.svg ” valitsemaksemme kuvana. Aseta sitten kohdistimen ominaisuuden arvoksi ' auto ”.

CSS

.btn {
kohdistin: url ( icon.svg ) , auto;
täyte: 10px;
}

Tallenna yllä oleva koodi ja suorita HTML-tiedosto nähdäksesi seuraavan tuloksen:

Annettu tulos osoittaa, että kohdistin on onnistuneesti muutettu kuvaksi hover-tilassa.

merkintä: ' auto ” käytetään vaihtoehtoisena vaihtoehtona kohdistimen ominaisuudessa; kun kuva ei lataudu tai tiedostopolku tai itse tiedosto puuttuu, oletuskuvake näkyy näytöllä automaattisen arvon takia.

Esimerkki 2: Oletuskohdistimen asettaminen päälle

Annamme esimerkiksi kuvan URL-osoitteen ja asetamme vain kohdistimen ominaisuuden arvoksi ' auto ':

kohdistin: url ( ) , auto;

Tämän seurauksena kohdistin ei muutu, kun osoitin viedään painikkeen päälle:

Esimerkki 3: Kuvavaihtoehdon asettaminen hoverille

Auton sijasta voit asettaa eri arvoja kohdistimelle, jonka haluat näyttää vaihtoehtona kuvalle. Muutamme esimerkiksi kohdistimen ominaisuuden arvon ' auto ”–” osoitin ':

kohdistin: url ( ) , osoitin;

Kuten alla olevasta tuloksesta näkyy, kohdistin muuttuu käsiosoittimeksi, kun se liikkuu painikkeen päällä:

Olemme tarjonneet helpoimman tavan vaihtaa kohdistimen kuvaa hiirellä CSS:n avulla.

Johtopäätös

CSS:ssä voit muuttaa kohdistimen hiirellä olevaan kuvaan käyttämällä ' kohdistin ” omaisuutta. Se mahdollistaa tavallisen kohdistimen muuttamisen kuvaksi määrittämällä ' url ' kuvan kohdistimen ominaisuuteen. Voit käyttää minkä tahansa tyyppistä kohdistinta, jonka haluat näyttää, kun se on ollut elementin päällä. Tämä artikkeli esitteli menetelmän muuttaa kursori käsiosoittimeksi.