CSS'deki İmleçler Nedir?
Her gün zaten özelleştirilmiş imleçler kullanıyoruz. Bu etkileşim, düğmelerin üzerine geldiğinizde işaretçi imlecinin bir ele dönüşmesi veya metnin üzerine geldiğinizde imlecin bir metin imlecine dönüşmesi gibi değiştirilmiş imleçler kullanılarak mümkün olur.
Ancak imleçler kullanıcılarımıza çeşitli ek yaratıcı fırsatlar sunmak için de kullanılabilir.
Özel imleçlerimizi geliştirmeye başlamadan önce, CSS'nin sıklıkla yapılan çeşitli eylemler için varsayılan imleçlere sahip olduğunun farkında olmalıyız.
Bu imleçler, tam olarak üzerine geldiğiniz noktada eylem seçenekleri sunar. Örnekler arasında bağlantılara tıklamanız, öğeleri sürükleyip bırakmanız, nesneleri yakınlaştırmanız ve uzaklaştırmanız gerektiğini ve daha fazlasını belirten imleçler yer alır.
İstediğiniz imleç türünü tanımlamak için CSS imleç özelliğini kullanın.
CSS İmleç Özelliği
Kullanıcıya gösterilmesi gereken imleç türünü CSS imleç özelliğini kullanarak belirleyebiliriz.
Fotoğrafları formlarda gönder düğmeleri olarak kullanmak, bu özelliğin yararlı bir uygulamasıdır. Varsayılan olarak, imleç bir bağlantının üzerindeyken işaretçi yerine bir el görünür. Ancak bir formun gönder butonu onun form değiştirmesine neden olmaz. Bu, birisi gönder düğmesi olan bir görselin üzerine geldiğinde resmin tıklanabilir olduğuna dair görsel bir işaret görevi görür.
Bu özellik, virgüllerle ayrılmış sıfır veya daha fazla değerle ve ardından gerektiği gibi bir anahtar kelime değeriyle belirtilir ve her biri görüntü dosyasına atıfta bulunur.
Sözdizimi
cursor: value;
Gayrimenkul değerleri
| Oto: | Bu özniteliğin varsayılan ayarı imleci yerleştirmektir.
| Takma ad: | Bu özellik imlecin yaratımla ilgili göstergesini göstermek için kullanılır.
| Tüm kaydırma: | Bu özellikteki imleç kaydırmayı belirtir.
| Hücre: | Bu özellikteki imleç, bir hücrenin veya hücre grubunun o anda seçili olduğunu gösterir.
| İçerik menüsü: | Bu özellikteki imleç bir içerik menüsünün varlığını gösterir.
| Col-yeniden boyutlandırma: | İmleç bu özellikteki bir sütunun üzerindeyken yatay olarak yeniden boyutlandırılabilir.
| Kopyala: | Bu özellikteki imleç bir şeyin kopyalanması gerektiğini gösterir.
| Artı işareti: | İmleç bu özellikte artı işareti olarak görünür.
| Varsayılan: | Varsayılan imleç.
| E-yeniden boyutlandırma: | Bu özellikteki imleç, kutunun sağ kenarının taşınması gerektiğini belirtir.
| Yeniden boyutlandırma: | Bu özellikteki imleç, çift yönlü yeniden boyutlandırma imlecini temsil eder.
| Yardım: | Bu özellikte imleç yardımın erişilebilir olduğunu gösterir.
| Taşınmak: | Bu özellikteki işaretçi bir şeyin taşınması gerektiğini ima eder
| . n-yeniden boyutlandırma: | N-resize özelliğini kullanırken işaretçi, kutunun üst sınırının kaydırılması gerektiğini gösterir.
| Ne-resize: | Bu özellik ile imleç kutunun kenarının sağa ve yukarıya kaydırılması gerektiğini gösterir.
| Yeni yeniden boyutlandırma: | Çift yönlü yeniden boyutlandırma imleci bu özellik ile gösterilir.
| Ns-yeniden boyutlandırma: | Çift yönlü yeniden boyutlandırma imleci ns-resize özelliğiyle gösterilir.
| Nw-yeniden boyutlandırma: | Bu özellikteki imleç, kutunun üst ve alt kenarlarının yukarı ve sola hareket ettirileceğini gösterir.
| Burun yeniden boyutlandırma: | Çift yönlü yeniden boyutlandırma imleci bu özellik ile gösterilir.
| Düşme yok: | Bu özellikteki imleç, çekilen nesnenin bu konuma atılamayacağını belirtir.
| Hiçbiri: | Bu özniteliğe göre öğe için bir imleç görüntülenmez.
| İzin verilmedi: | Bu özellikteki imleç istenen eylemin gerçekleştirilmeyeceğini gösterir.
| Işaretçi: | Bu özellikteki imleç bir işaretçi görevi görür ve bağlantı ilerlemesini görüntüler.
| İlerlemek: | Bu özellikteki imleç programın aktif olduğunu gösterir.
| Satır yeniden boyutlandırma: | İmleç, bu özelliğin dikey satır yeniden boyutlandırmaya izin verdiğini gösterir.
| S-yeniden boyutlandırma: | Bu özelliği kullanırken işaretçi, kutunun alt sınırının alçaltılması gerektiğini gösterir.
| Yeniden boyutlandırma: | Bu özellikteki imleç, kutunun kenarının sağa ve aşağıya kaydırılması gerektiğini belirtir.
| Sw-yeniden boyutlandırma: | Bu özellikteki imleç, kutunun sol ve alt kenarlarının taşınması gerektiğini belirtir.
| Metin: | Bu özellikteki imleç seçilebilecek metni belirtir.
| URL'si: | Bu özellik, virgüllerle ayrılmış özel imleç URL'lerinin bir listesini ve listenin sonunda genel bir imleci içerir.
| Dikey metin: | Bu özellikteki imleç olası dikey metin seçimlerini gösterir.
| W-yeniden boyutlandırma: | Bu özelliği kullanırken işaretçi, kutunun sol kenarının taşınması gerektiğini gösterir.
Örnek
Bu örnek, imleç özelliğinin nasıl kullanılacağını gösterir. İmleç özelliğinin değeri beklemeye ayarlandığından program meşgul.
CSS cursor property .wait { cursor: wait; } h1 { color: red; } <p> Login Credentials </p> Çıktı
Kullanıcıya gösterilmesi gereken imleç türünü CSS imleç özelliğini kullanarak belirleyebiliriz. Fotoğrafları formlarda gönder düğmeleri olarak kullanmak, bu özelliğin yararlı bir uygulamasıdır. Varsayılan olarak, imleç bir bağlantının üzerindeyken işaretçi yerine bir el görünür.
