CSS Hover nedir?

CSS'deki :hover seçici, imleç öğenin üzerindeyken öğeye stiller uygular. Etkileşimli efektler oluşturmak veya etkileşime girilen öğelere dikkat çekmek için sıklıkla kullanılır.

Bir öğeyi :hover seçiciyle etiket adını, sınıfını veya kimliğini kullanarak hedefleyebilirsiniz.

Örneğin:

 .button:hover { background-color: #ff0000; color: #ffffff; } 

Kullanıcı fareyi sınıf 'düğmesi' olan bir öğenin üzerine getirdiğinde önceki örnekteki arka plan rengi kırmızıya (#ff0000) dönerken, metin rengi beyaza (#ffffff) dönecektir.

:hover seçiciyi yazı tipi boyutu, kenarlık veya dönüştürme gibi diğer CSS öğeleriyle birleştirerek çeşitli vurgulu efektleri üretilebilir. Web sitenizin veya uygulamanızın görsel geri bildirimini ve etkileşimini artırmak için güçlü bir araçtır.

Sözdizimi:

 :hover { css declarations; } 

CSS kullanarak fareyle üzerine gelmeyi anlamak için bazı örnekler alalım:

Örnek 1:

HTML Kodu:

 Hover Me 

CSS Kodu:

 .hover-button { background-color: #eaeaea; color: #333333; padding: 10px 20px; border: none; cursor: pointer; transition: background-color 0.3s ease; } .hover-button:hover { background-color: #ff0000; color: #ffffff; } 

Açıklama:

Yukarıdaki örnekte, sınıf vurgulu düğmeli bir düğmemiz var. Düğmenin başlangıç ​​renk kombinasyonları açık gri arka plan (#eaeaea) ve koyu gri metindir (#333333). Fare düğmenin üzerine getirildiğinde arka plan rengi kırmızıya (#ff0000) ve metin rengi beyaza (#ffffff) dönüşür.

0,3 saniyelik bir süre ve kolay zamanlama işleviyle vurgulu düğme sınıfındaki geçiş özelliği, fare düğmenin üzerine geldiğinde arka plan rengi değişimi için akıcı bir geçiş sağlar.

Bağlantılar gibi diğer öğeler ( ), Görüntüler ( ), divs ( ) veya etkileşimli hale getirmek istediğiniz diğer herhangi bir öğe, benzer vurgulu efektleri kullanabilir. :hover seçici içindeki özellikleri ve değerleri değiştirerek tasarım ihtiyaçlarınıza uygun çeşitli vurgulu efektler oluşturabilirsiniz.

Örnek 2: görüntü yakınlaştırma efekti

HTML Kodu:

CSS Kodu:

 .image-zoom { overflow: hidden; } .image-zoom img { transition: transform 0.3s ease; } .image-zoom:hover img { transform: scale(1.2); } 

Örnek 3: Bağlantı Altı Çizili Efekti

HTML Kodu:

 <a href="#">Hover Me</a> 

CSS Kodu:

 .underline-link { text-decoration: none; transition: border-bottom 0.3s ease; } .underline-link:hover { border-bottom: 2px solid #ff0000; } 

CSS'de Hover özelliği

Çeşitli avantaj ve özellikler sunan CSS:hover özelliğini kullanarak web sayfalarınızın etkileşimini ve görsel efektlerini iyileştirebilirsiniz. Aşağıda bazı temel CSS vurgulu özellikleri verilmiştir:

Etkileşimli etki::hover seçici kullanılarak öğelerin üzerine gelindiğinde görünümleri değiştirilerek etkileşimli efektler üretilebilir. Kullanıcılar içeriğinizle etkileşime girdikçe arka plan rengi, metin rengi, opaklık, kutu gölgesi, dönüştürme ve daha fazlası gibi özellikleri değiştirerek onlara görsel geri bildirim gösterebilirsiniz.Birden Çok Öğeyi Hedeflemek::hover seçiciyi kullanarak bir sayfada birden fazla öğe seçebilirsiniz. Bu, düğmeler, bağlantılar, resimler, gezinme menüleri ve etkileşimli hale getirmek istediğiniz diğer öğeler de dahil olmak üzere çeşitli öğeler için standartlaştırılmış fareyle üzerine gelme efektleri tasarlayabileceğiniz anlamına gelir.Geçişler ve Animasyonlar Desteği::hover seçici, şık, estetik açıdan hoş efektler üretmek için CSS geçişleri ve animasyonlarıyla birlikte kullanılabilir. Geçiş veya animasyon özelliklerini tanımlayarak, bir öğenin üzerine gelindiğinde stillerin nasıl değişeceğini düzenlemek için süreyi, zamanlama işlevini ve animasyonla ilgili diğer ayarları belirleyebilirsiniz.Ek Seçiciler Ekleme::hover seçici, belirli öğelere odaklanmak veya önceden tanımlanmış ölçütlere göre stiller uygulamak için diğer CSS seçicilerle birlikte kullanılabilir. Örneğin, :hover seçiciyi sınıf seçiciler, kimlik seçiciler veya sözde öğelerle birleştirerek benzersiz ve özelleştirilmiş vurgulu efektler oluşturabilirsiniz.Erişilebilirliği Desteklemek:Fareyle üzerine gelme efektleri geliştirilirken erişilebilirlik dikkate alınmalıdır. Ekran okuyucular gibi imleç kullanan yardımcı teknolojilerin kullanıcıları, fareyle üzerine gelme efektine erişemeyebilir. Bu nedenle, birincil işlevin veya içeriğin fareyle üzerine gelme efektleri olmadan hâlâ okunabilir ve kullanılabilir olup olmadığının kontrol edilmesi önerilir.Çapraz Tarayıcı Desteği:Çoğu modern web tarayıcısı CSS: vurgulu özelliğini destekler. Chrome, Firefox, Safari, Edge ve diğerleri dahil olmak üzere en yaygın kullanılan tarayıcılarla uyumlu bir CSS spesifikasyonu bileşenidir. Bu, farklı platformlarda görünüm ve davranışta tutarlılık sağlar.