CSS cursor Kullanımı

CSS "cursor" özelliği, bir HTML elementi üzerinde fare imlecinin nasıl görüneceğini gösterir. Bu özellik, elemente tıklandığında veya fare üzerinde gezindiğinde görüntülenecek olan fare imlecini belirlemektedir.

"cursor" özelliği, birçok farklı değer alabilir. Bazıları aşağıdaki listede anlatılmıştır..

  • pointer değeri, elemente tıklandığında fare imlecini bir işaretçi şekline dönüştürür.
  • auto değeri, varsayılan olarak kullanılır ve elementin içeriğine göre fare imlecini otomatik olarak belirler.
  • text değeri, elementin içeriği metin olduğunda fare imlecini bir metin imlecine dönüştürür.
  • none değeri ise, elemente tıklandığında veya fare üzerinde gezindiğinde hiçbir fare imleci gösterilmez.

Aşağıdaki örneklere bakalım...

/* Tüm linkler için işaretçi fare imlecini kullan */
a {
  cursor: pointer;
}
/* Butonlar için el fare imlecini kullan */
button {
  cursor: pointer;
}
/* Metin alanları için metin fare imlecini kullan */
input[type="text"] {
  cursor: text;
}
/* Resimler için zoom-in fare imlecini kullan */
img {
  cursor: zoom-in;
}

Bu örnekte, tüm linkler için "pointer" değeri kullanılmıştır. Bu, linklere tıklandığında "işaretçi fare imleci" görülmesini sağlar. Butonlar için de "pointer" değeri kullanılmıştır. Bu nedenle, butonlara tıklandığında el fare imleci görüntülenir. Metin alanları için "text" değeri kullanılmış, Böylece metin alanlarına tıklandığında metin fare imleci görüntülenmesi sağlanmıştır. Resimler için de "zoom-in" değeri kullanılmıştır. Bu nedenle, resimlere tıklandığında zoom-in fare imleci görüntülenecektir.

Sonuç olarak, "cursor" özelliği, elemente tıklandığında veya fare üzerinde gezindiğinde görüntülenecek olan fare imlecini belirler. Bu özellik, kullanıcı deneyimini arttırmak için kullanılabilir ve kullanıcıya ne yaptıkları konusunda bilgi verir.

Örneğin, bir butona tıklandığında el fare imlecini görüntülemek, kullanıcıya bu butonun tıklama özelliği olduğunu söyler. Aynı şekilde, bir resme tıklandığında zoom-in fare imlecini görüntülemek, kullanıcıya bu resmin büyütülebileceği anlatır.


CSS

İlginizi Çekebilir

CSS border-spacing Kullanımı

CSS stroke-width Kullanımı

CSS grid-column-gap Kullanımı

CSS grid-area Kullanımı

CSS opacity Kullanımı