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.
