CSS Cursor Property Türleri ve Kullanımı

Css’de elemanların üzerine gelindiğinde imlecin hangi şekli alacağını belirlemek için cursor kullanılır. Yaklaşık 30 adet tanımlama mevcuttur. Bunları w3schools ‘da tamamen bulabileceğiniz gibi ben yine aşağıda bir çoğunu paylaşacağım. Mause’nin şeklini aşağıda verilen komutlar ile belirleyebilirsiniz.

CSS Cursor Property Türleri ve Kullanımı

<!DOCTYPE html>
<html>
<body>
<p>Mouse over the words to change the cursor.</p>
<span style="cursor:auto">auto</span><br>
<span style="cursor:crosshair">crosshair</span><br>
<span style="cursor:default">default</span><br>
<span style="cursor:e-resize">e-resize</span><br>
<span style="cursor:grab">grab</span><br>
<span style="cursor:help">help</span><br>
<span style="cursor:move">move</span><br>
<span style="cursor:n-resize">n-resize</span><br>
<span style="cursor:ne-resize">ne-resize</span><br>
<span style="cursor:nw-resize">nw-resize</span><br>
<span style="cursor:pointer">pointer</span><br>
<span style="cursor:progress">progress</span><br>
<span style="cursor:s-resize">s-resize</span><br>
<span style="cursor:se-resize">se-resize</span><br>
<span style="cursor:sw-resize">sw-resize</span><br>
<span style="cursor:text">text</span><br>
<span style="cursor:w-resize">w-resize</span><br>
<span style="cursor:wait">wait</span><br>
<span style="cursor:not-allowed">not-allowed</span><br>
<span style="cursor:no-drop">no-drop</span><br>
</body>
</html>

bu html sayfasını çalıştırdığınızda sonucu görebilirsiniz. Kullanımı yaygındır.

Örnek Kullanım

span.crosshair {
    cursor: crosshair;
}

span.help {
    cursor: help;
}

span.wait {
    cursor: wait;
}

Desteklediği tarayıcı bilgisi ve daha fazla detaya https://www.w3schools.com/cssref/pr_class_cursor.asp buradan , bakabilirsiniz.

Categories Genel

AuthorHarun ALP Hakkında

Bu adam , bilgi sahibi olduğu konularda makalelerini daha bilgilendirici hale getirip görseller ile süslüyor ve seo uyumlu makaleler ortaya çıkarıyor. Hazır sistemler, Front End ve Back End , tasarım araçları , seo optimizasyonu , güncel webmaster konuları hakkında bilgi sahibi. Bunları boş zamanlarında burada sizlerle paylaşıyor.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir