- Konu sahibi
- #1
CSS’te
Bu kural,
Bu örnek yalnız imleç ve odak görünümünü gösterir; Kaydet yazısına rağmen herhangi bir veri kaydetmez. Gerçek işlem ayrıca uygulanmalıdır.
Dosyayı tarayıcıda açıp düğmenin üzerine geldiğinizde el biçimli imleci görmelisiniz. İmleç değişmiyorsa CSS dosyasının yüklenip yüklenmediğini, sınıf adının HTML ile aynı yazılıp yazılmadığını ve başka bir CSS kuralının
Karar verirken imleç türünü öğenin gerçek işleviyle eşleştirin:
Bu değer yalnızca görsel bir ipucudur. Düğme devre dışıysa
Dokunmatik cihazda fare veya trackpad imleci bulunmayabilir. Ayrıca platformların simgeleri ve desteklediği imleç görünümleri farklılaşabilir; her cihazda aynı el resmini garanti etmeyin. Bağlantı metnini, düğme etiketini ve odak görünümünü, pointer ipucundan bağımsız anlaşılır kurun.
Kural doğru göründüğü halde sonuç değişmiyorsa imlecin gerçekte hangi öğenin üzerinde olduğunu da inceleyin. Düğmenin üstüne yerleşen başka bir katman veya çocuk öğenin kendi cursor kuralı, baktığınız seçiciden farklı bir sonucu gösterebilir.
cursor: pointer;, fare imleci bir öğenin üzerine geldiğinde genellikle parmakla gösteren el simgesinin görünmesini sağlar. Kullanıcıya o bölgede bir bağlantı veya tıklanabilir işlem bulunduğu izlenimini verir. Ancak yalnızca imleç görünümünü değiştirir; öğeyi kendiliğinden tıklanabilir yapmaz.Temel kullanım
Kod:
.buton {
cursor: pointer;
}Bu kural,
buton sınıfına sahip öğenin üzerine fareyle gelindiğinde imleci değiştirir. Kuralı bir HTML düğmesine, bağlantıya veya JavaScript ile tıklama olayı tanımlanmış özel bir arayüze uygulayabilirsiniz.Çalışan en küçük örnek
Kod:
<!doctype html>
<html lang="tr">
<head>
<meta charset="utf-8">
<title>cursor pointer örneği</title>
<style>
.buton {
padding: 10px 16px;
border: 0;
border-radius: 4px;
background: #1769aa;
color: white;
cursor: pointer;
}
.buton:focus-visible {
outline: 2px solid #111;
outline-offset: 3px;
}
</style>
</head>
<body>
<button class="buton" type="button">Kaydet</button>
</body>
</html>Bu örnek yalnız imleç ve odak görünümünü gösterir; Kaydet yazısına rağmen herhangi bir veri kaydetmez. Gerçek işlem ayrıca uygulanmalıdır.
Dosyayı tarayıcıda açıp düğmenin üzerine geldiğinizde el biçimli imleci görmelisiniz. İmleç değişmiyorsa CSS dosyasının yüklenip yüklenmediğini, sınıf adının HTML ile aynı yazılıp yazılmadığını ve başka bir CSS kuralının
cursor özelliğini ezip ezmediğini kontrol edin.Ne zaman kullanılmalı?
cursor: pointer; özellikle <button> gibi işlem başlatan öğelerde veya görünüşü düğme gibi tasarlanmış bağlantılarda kullanılabilir. Gerçek bir bağlantı için mümkünse <a>, işlem için <button> kullanın. Sadece <div> ya da <span> üzerine pointer eklemek, klavye erişilebilirliği veya tıklama davranışı sağlamaz.Karar verirken imleç türünü öğenin gerçek işleviyle eşleştirin:
| Değer | Uygun kullanım | Anlam |
|---|---|---|
pointer | Bağlantı veya tıklanabilir işlem | Üzerine gelinen alan etkileşimli görünüyor |
default | Normal içerik | Platformun varsayılan oku |
not-allowed | Devre dışı veya izin verilmeyen işlem | İşlemin yapılamayacağını belirtir |
pointer kullanmak kullanıcıyı yanıltabilir; bu durumda devre dışı görünüm ve uygun imleç birlikte tanımlanmalıdır.Yaygın hatalar
cursor = pointeryazmak: CSS bildiriminde eşittir yerine iki nokta kullanılır; doğru kullanımcursor: pointer;şeklindedir.- Pointer ekleyince öğenin otomatik çalışacağını sanmak: Tıklama davranışı için bağlantı, düğme veya JavaScript olayı gerekir.
- Her öğeye pointer vermek: Normal metin ve pasif kartlarda bu kullanım, etkileşim beklentisi oluşturabilir.
- Sadece renkle etkileşimi anlatmak: Hover rengi, odak görünümü ve uygun HTML öğesi de düşünülmelidir.
Fare dışında da kontrol edin
Tab tuşuyla örnekteki düğmeye ilerleyin. Odak işaretinin görünmesi, fare kullanmadan hangi öğede olduğunuzu anlamanızı sağlar. Enter veya Space davranışını gerçek uygulama işlemiyle birlikte ayrıca test edin. Bir div öğesine yalnız imleç kuralı yazmak bu yerleşik düğme davranışlarını sağlamaz.Dokunmatik cihazda fare veya trackpad imleci bulunmayabilir. Ayrıca platformların simgeleri ve desteklediği imleç görünümleri farklılaşabilir; her cihazda aynı el resmini garanti etmeyin. Bağlantı metnini, düğme etiketini ve odak görünümünü, pointer ipucundan bağımsız anlaşılır kurun.
Kural doğru göründüğü halde sonuç değişmiyorsa imlecin gerçekte hangi öğenin üzerinde olduğunu da inceleyin. Düğmenin üstüne yerleşen başka bir katman veya çocuk öğenin kendi cursor kuralı, baktığınız seçiciden farklı bir sonucu gösterebilir.
