BİLGİ SAYAMIYORUM beta

Sadece CSS kullanarak bir link nasıl tıklanamaz hale getirilir?

0

Css i biraz kurcaladıktan sonra göreceğiniz gibi, kendisi bir sergileme tekniğidir. Elinizde olan html sayfalarının içeriğini kullanıcıya okunduğu gibi sırasıyla, altalta ve birbirinin benzeri bir stilde sergilemek yerine, fontları boyutları değiştirmenizi, basit özellikler eklemenizi ve yerleşimlerle oynamanızı sağlar. Bu bağlamda bir linkin yani bağlantının işlevini kaldırmak gibi mekanik bir işi yapamayacağını düşünebilirsiniz, bir yere kadar da haklısınız. Ancak CSS3 ile bu işe de birazcık müdahele etme hakkınız var. Öncelikle şu bağlantımızı temsil eden html öğesi olsun:

<a href="site.html" class="stil">Siteye git!</a>

Herşeyden önce tabii ki bu bağlantıyı CSS ile görünmez yaparak nesneden tamamen kurtulabilirsiniz:

.stil { display: none; }

Ama istediğinizin bu olmadığını tahmin ediyorum. Başka bir örnek de çıktısı link olan button elemanını kullanmak. O da sınıf olarak disabled aldığı zaman tıklanabilir gözükse de çalışmıyor olması lazım, onu da stillerine "cursor: default;" ekleyerek kaldırabilirsiniz:

<button class="disabled">Siteye git!</button>

CSS3 çözümünde ise "pointer-events" kullanmanız gerekiyor. Tabii ki bu her tarayıcıda çalışmıyor, mesela Chrome 63, Firefox 57, Safari 11, Edge 16 öncesinde sorun yaşanır.

.stil {
     pointer-events: none;
     cursor: default;
}

Ancak bu linki tıklanamaz hale getirse bile aslında çalışmaz hale getirmiyor. TAB ı kullanarak sitede linkleri dolaşan biri buna geldiğinde Enter a basarak o linkin yolladığı sayfaya gidebilir. Bu bağlantıyı böyle tıklanamaz hale getirirken opacity sini de düşürmeyi ve neden çalışamaz olduğunu söyleyen bir uyarı yerleştirmeyi düşünmenizi tavsiye ederim.

BENZER 7

Kimse etkileşime girmemiş

ETİKETLER