Fare İmleçleri

CSS kullanılarak fare imlecinin şekli değiştirilebilir. Bu biçimlendirme cursor özelliği ile yapılır. Hangi değerin neye yaradığı aşağıda gösterilmektedir.

auto: Varsayılan değerdir ve tarayıcının otomatik olarak imleç atamasına yarar.
crosshair: İmlecin artı şeklinde olmasını sağlar
zoom-in: İmleç büyütmeye yarayan bir büyüteç şeklini alır.
zoom-out: İmleç küçültmeye yarayan bir büyüteç şeklini alır.
e-resize: İmleç bir kutunun bir kenarı sağa hareket ettirilecekmiş gibi bir şekil alır.
w-resize: İmleç bir kutunun bir kenarı sola hareket ettirilecekmiş gibi bir şekil alır.
ew-resize: İmleç bir kutunun bir kenarı sağa ya da sola hareket ettirilecekmiş gibi bir şekil alır.
n-resize: İmleç bir kutunun bir kenarı yukarı hareket ettirilecekmiş gibi bir şekil alır.
s-resize: İmleç bir kutunun bir kenarı aşağı hareket ettirilecekmiş gibi bir şekil alır.
ns-resize: İmleç bir kutunun bir kenarı yukarı ya da aşağı hareket ettirilecekmiş gibi bir şekil alır.
ne-resize: İmleç bir kutunun bir kenarı sağa ve üste hareket ettirilecekmiş gibi bir şekil alır.
nw-resize: İmleç bir kutunun bir kenarı sola ve üste hareket ettirilecekmiş gibi bir şekil alır.
se-resize: İmleç bir kutunun bir kenarı sağa ve alta hareket ettirilecekmiş gibi bir şekil alır.
sw-resize: İmleç bir kutunun bir kenarı sağa ve alta hareket ettirilecekmiş gibi bir şekil alır.
nesw-resize: İmleç bir kutunun bir kenarı sağa ve üste ya da sola ve alta hareket ettirilecekmiş gibi bir şekil alır.
nwse-resize: İmleç bir kutunun bir kenarı sola ve üste ya da sağa ve alta hareket ettirilecekmiş gibi bir şekil alır.
col-resize: İmleç bir sütunun genişliği ayarlanacakmış gibi bir şekil alır.
row-resize: İmleç bir satırın yüksekliği ayarlanacakmış gibi bir şekil alır.
cell: İmleç hücre seçilecekmiş gibi bir şekil alır.
grab ve grabbing: İmleç eleman tutulabilirmiş gibi bir şekil alır.
default: Bilindik imleç şeklini ifade eder.
move: İmleç eleman hareket ettirilebilirmiş gibi bir şekil alır.
all-scroll: İmleç her yöne kaydırma yapılabilirmiş gibi bir şekil alır.
context-menu: İmleç açılır menü varmış gibi bir şekil alır.
text: İmleç yazı seçecekmiş gibi bir şekil alır.
vertical-text: İmleç dikey bir yazı seçecekmiş gibi bir şekil alır.
pointer: İmleç işaret parmağı görünümünü alır.
no-drop: İmleç tutulan bir elemanın bir yere bırakılamayacağını belirtecek bir şekil alır.
not-allowed: İmleç bir şeye izin verilmediğini belirtecek bir şekil alır.
none: İmlecin görünmemesini sağlar.
progress: İmleç programın çalıştığını ve meşgul olduğunu gösterir.
wait: İmleç programın meşgul olduğunu gösterir.
copy: İmleç bir şeyin kopyalanacağını belirtecek bir şekil alır.
alias: İmleç bir şeyin kopyasının oluşturulacağını belirtecek bir şekil alır.
help: İmleç bir şey hakkında yardım bilgisi olduğunu belirtecek bir şekil alır.

Bu değerlerin bazıları aynı imleç şekillerine sebep olmaktadır. Bu nedenle aşağıdaki örnekte sadece bir kısmının çalışması gösterilmiştir.

<!DOCTYPE html>
<html>
<head>
<title>CSS Fare İmleçleri</title>
<style>
span.auto:hover{
    cursor: auto;
}
span.crosshair:hover{
    cursor: crosshair;
}
span.zoom-in:hover{
    cursor: zoom-in;
}
span.zoom-out:hover{
    cursor: zoom-out;
}
span.e-resize:hover{
    cursor: e-resize;
}
span.s-resize:hover{
    cursor: s-resize;
}
span.ne-resize:hover{
    cursor: ne-resize;
}
span.nw-resize:hover{
    cursor: nw-resize;
}
span.col-resize:hover{
    cursor: col-resize;
}
span.row-resize:hover{
    cursor: row-resize;
}
span.cell:hover{
    cursor: cell;
}
span.move:hover{
    cursor: move;
}
span.none:hover{
    cursor: none;
}
span.progress:hover{
    cursor: progress;
}
span.wait:hover{
    cursor: wait;
}
span.copy:hover{
    cursor: copy;
}
span.alias:hover{
    cursor: alias;
}
span{
    width: 200px;
    height: 50px;
    background-color: yellow;
    display: inline-block;
    padding: 10px;
    margin: 20px;
}
</style>
</head>
<body>
    <span class="auto">auto</span>
    <span class="crosshair">crosshair</span>
    <span class="zoom-in">zoom-in</span>
    <span class="zoom-out">zoom-out</span>
    <span class="e-resize">e-resize</span>
    <span class="s-resize">s-resize</span>
    <span class="ne-resize">ne-resize</span>
    <span class="nw-resize">nw-resize</span>
    <span class="col-resize">col-resize</span>
    <span class="row-resize">row-resize</span>
    <span class="cell">cell</p></span>
    <span class="move">move</p></span>
    <span class="none">none</p></span>
    <span class="progress">progress</span>
    <span class="wait">wait</span>
    <span class="copy">copy</span>
    <span class="alias">alias</span>
</body>
</html>

Değer olarak url("adres") formatında bir görsel adresi de girilebilir. Bu durumda imleç bu görseli kullanır. Böyle yapıldığında kesinlikle virgülle ayrıldıktan sonra standart değerlerden birisi de girilmelidir. Bu durumda görsel görüntülenemezse belirtilen şekil imleç olarak görüntülenir.

<!DOCTYPE html>
<html>
<head>
<title>CSS Fare İmleçleri</title>
<style>
span.url:hover{
    cursor: url("liste.jpg"), auto;
}
span{
    width: 200px;
    height: 50px;
    background-color: yellow;
    display: inline-block;
    padding: 10px;
    margin: 20px;
}
</style>
</head>
<body>
    <span class="url">URL</span>
</body>
</html>