HTML Linklerin Üzerine Gelince Çizgi Ekleme: Kapsamlı Bir Kılavuz
Giriş
Web sayfalarında, kullanıcıların belirli bir metin veya görüntüye tıklayarak başka bir web sayfasına veya kaynağa yönlendirilmelerini sağlayan bağlantılar yaygın olarak kullanılır. Varsayılan olarak, HTML bağlantıları genellikle altı çizili ve mavi renkte görüntülenir. Ancak, estetik nedenlerle veya kullanıcı deneyimini geliştirmek için, bağlantıların üzerine gelindiğinde bir çizgi eklemek isteyebilirsiniz. Bu makale, HTML bağlantılarına üzerine gelindiğinde çizgi eklemenin çeşitli yollarını ayrıntılı olarak açıklayacaktır.
CSS Kullanarak Çizgi Ekleme
CSS (Basamaklı Stil Sayfaları), HTML belgelerinin görünümünü ve düzenini kontrol etmek için kullanılan bir stil dilidir. Bağlantıların üzerine gelindiğinde çizgi eklemek için aşağıdaki CSS kuralını kullanabilirsiniz:
css
a:hover {
text-decoration: underline;
}
Bu kural, bağlantıların üzerine gelindiğinde (:hover seçicisi) metin dekorasyon özelliğinin “underline” (altı çizili) olarak ayarlanmasını belirtir.
HTML Kullanarak Çizgi Ekleme
CSS kullanmak istemiyorsanız, HTML’de <u> etiketini kullanarak da bağlantıların üzerine gelindiğinde çizgi ekleyebilirsiniz:
html
<a href="https://www.example.com"><u>Örnek Bağlantı</u></a>
Bu kod, “Örnek Bağlantı” metninin altı çizili olarak görüntülenmesini sağlayacaktır.
JavaScript Kullanarak Çizgi Ekleme
JavaScript, web sayfalarına etkileşimli özellikler eklemek için kullanılan bir programlama dilidir. Bağlantıların üzerine gelindiğinde çizgi eklemek için aşağıdaki JavaScript kodunu kullanabilirsiniz:
“`javascript
const links = document.querySelectorAll(“a”);
links.forEach((link) => {
link.addEventListener(“mouseover”, () => {
link.style.textDecoration = “underline”;
});
link.addEventListener(“mouseout”, () => {
link.style.textDecoration = “none”;
});
});
“`
Bu kod, sayfadaki tüm bağlantıları seçer ve üzerlerine gelindiğinde metin dekorasyon özelliğini “underline” olarak ayarlar. Bağlantıların üzerinden uzaklaşıldığında, metin dekorasyonu kaldırılır.
Faydalı Siteler ve Dosyalar
Sonuç
HTML bağlantılarına üzerine gelindiğinde çizgi eklemek, kullanıcı deneyimini geliştirmek ve web sayfanızın estetiğini iyileştirmek için kullanışlı bir tekniktir. Bu makalede açıklanan yöntemleri kullanarak, bağlantıların üzerine gelindiğinde kolayca çizgi ekleyebilir ve web sayfanızın görünümünü özelleştirebilirsiniz.