CSS İmleç Özelliği

9 Mayıs 2021 905 kez okundu

CSS ile sitemizde özelleştirmeler yapabileceğimizi daha önceden de bahsetmiştik. Bu yazımızda da özelleştirmelerden biri olan imleç özelliğine bakacağız. CSS İmleç özelliği ile elemanların üzerine fare ile geldiğimizde imlecin değişmesini sağlayabiliriz.
Örneğin bir resim üzerine geldiğimiz zaman imlecin yok olması veya imlecin el işaretine dönmesini sağlayabiliriz.

Aşağıda bulunan tablodan, imleçlerin isimlerini bulabilirsiniz. İmleçleri kullanırken cursor parametresini kullanmaktayız.

Örnek: cursor: help;

İçindekiler

İmleç Tablosu

auto	pointer	sw-resize	n-resize
default	nw-resize	w-resize	help
crosshair	ne-resize	e-resize	text
move	se-resize	s-resize	wait
cell	all-scroll	grab	grabbing
not-allowed	progress	zoom-out	zoom-in

İmleç Özelliğinin Kullanımı

Resimlere fare imlecini değiştirmek

Fareyle üzerine geldiğimiz zaman “wait” imleci yani yükleniyor imlecini koymak istersek;

<html>
 <head>
   <style>
        img
        {
            cursor: wait;
        }
   </style>
 </head>

 <body>
    <img src="resim.jpg">
 </body>
</html>

<html>

<head>

<style>

img

{

cursor: wait;

}

</style>

</head>

<body>

</body>

</html>

CSS İmleç Özelliği

Metinlerde fare imlecini değiştirmek

Fareyle üzerine geldiğimiz zaman “crosshair” imleci yani nişan imlecini koymak istersek;

<html>
 <head>
   <style>
        p
        {
            cursor: crosshair;
        }
   </style>
 </head>

 <body>
    <p>Denemek için fareyle üzerime gel!</p>
 </body>
</html>

<html>

<head>

<style>

{

cursor: crosshair;

}

</style>

</head>

<body>

<p>Denemek için fareyle üzerime gel!</p>

</body>

</html>

Denemek için fareyle üzerime gel!

Linklerde fare imlecini değiştirmek

Fareyle üzerine geldiğimiz zaman “move” imleci yani taşıma imlecini koymak istersek;

<html>
 <head>
   <style>
        a
        {
            cursor: move;
        }
   </style>
 </head>

 <body>
    <a href="https://www.kodkampusu.com">Denemek için fareyle üzerime gel!</a>
 </body>
</html>