CSS'de, farklı HTML öğeleri için çeşitli imleç türleri kullanılır ve imleç türünü değiştirmek için “ imleç ” özelliği kullanılır. İmleç türünü değiştirmenize ve ekranda görüntülemek istediğiniz imlecin değerini ayarlamanıza izin verir. Ek bir özellik olarak, kendi imleç resminizi ayarlamanıza da olanak tanır.

Bu kılavuzda şunları öğreneceksiniz:

• İmleç CSS özelliği nedir
• CSS kullanarak Hover'da imleç görüntüye nasıl değiştirilir

Haydi başlayalım!

'İmleç' CSS Özelliği nedir?

Bir HTML öğesinin üzerinde farenin görünümünü kontrol etmek için, “ imleç CSS'nin ” özelliği kullanılabilir. Normal imleci, kopya imleci, el işaretçisi, kapma ve daha pek çok farklı türde değiştirmeye izin verir. İmleç özelliğinde görüntünün url'sini ayarlayarak kendi özel imlecinizi de ayarlayabilirsiniz.

Sözdizimi

İmleç özelliğinin sözdizimi şu şekilde verilir:

Yukarıda verilen sözdiziminde, görüntünün yolunu “ url() ” ekranda görüntülemek istediğiniz

Şimdi normal imleci fareyle üzerine gelindiğinde bir görüntüye dönüştürmek için örneğe geçeceğiz.

CSS Kullanarak Fareyle Üzerine Geldiğinde İmleci Görüntüye Nasıl Değiştirebilirim?

İmleci üzerine gelindiğinde bir görüntüye dönüştürmek için önce HTML'ye bir öğe ekleyin.

Örnek 1: İmleç Özelliğini kullanarak Fareyle Üzerine Geldiğinde İmleci Bir Görüntüye Değiştirme

Bir

başlığı ve “buton sınıfı adı” oluşturacağız. btn ”.

HTML

< gövde >
< h1 > Fareyle Üzerine Geldiğinde İmleci Görüntüye Değiştir h1 >
< buton sınıf = 'btn' > Beni tıkla buton >
gövde >

Şu anda, düğmenin üzerine gelmek varsayılan imleci gösterecektir:

Şimdi CSS'ye gidin ve imleci resme değiştirin.

Ardından, görüntünün yolunu “ url() ”. Örneğin, “i with.svg ” olarak seçtiğimiz görsel. Ardından, imleç özelliğinin değerini “olarak ayarlayın. Oto ”.

CSS

.btn {
imleç: url ( simge.svg ) , Oto;
dolgu: 10 piksel;
}

Aşağıdaki sonucu görmek için yukarıdaki kodu kaydedin ve HTML dosyasını çalıştırın:

Verilen çıktı, imlecin üzerine gelindiğinde başarıyla bir görüntüye dönüştürüldüğünü gösterir.

Not: “ Oto ” imleç özelliğinde alternatif bir seçenek olarak kullanılır; görüntü yüklenmediğinde veya dosya yolu veya dosyanın kendisi eksik olduğunda, otomatik değer nedeniyle ekranda varsayılan simge görüntülenir.

Örnek 2: Vurgulu Olduğunda Varsayılan İmleci Ayarlama

Örneğin, resmin url'sini vereceğiz ve sadece imleç özelliğinin değerini “ olarak ayarlayacağız. Oto ”:

imleç: url ( ) , Oto;

Sonuç olarak, imleç düğmenin üzerine getirildiğinde değişmez:

Örnek 3: Fareyle Üzerine Geldiğinde Görüntü Alternatifini Ayarlama

Otomatik yerine, görüntüye alternatif olarak görüntülemek istediğiniz imlecin farklı değerlerini ayarlayabilirsiniz. Örneğin, imleç özelliğinin değerini “ olarak değiştireceğiz. Oto ' ile ' Işaretçi ”:

imleç: url ( ) , Işaretçi;

Aşağıdaki çıktıda görebileceğiniz gibi, imleç düğmenin üzerine geldiğinde bir el işaretçisine dönüşür:

CSS kullanarak fareyle üzerine gelindiğinde imleç görüntüsünü değiştirmek için en kolay yöntemi sağladık.

Çözüm

CSS'de, imleci ' kullanarak üzerine gelindiğinde görüntüye değiştirebilirsiniz. imleç ' Emlak. “Atayarak normal bir imleci bir görüntüye değiştirmeye izin verir. url ” resmin imleç özelliğine. Bir öğenin üzerine geldiğinde görüntülemek istediğiniz herhangi bir imleç türünü uygulayabilirsiniz. Bu makale, imleci bir el işaretçisine değiştirme yöntemini gösterdi.