CSS'de Hover Nedir? :hover Nasıl Kullanılır?

2 Eylül 2023 | 239

CSS hover, bir HTML öğesinin üzerine gelindiğinde veya odaklandığında belirli stil değişikliklerini uygulamak için kullanılan bir CSS pseudo-sınıfıdır. Hover etkisi, web sitelerinin etkileşimli ve kullanıcı dostu olmasını sağlar.

CSS hover nasıl kullanılır?

İlk olarak, üzerine gelindiğinde değişiklik yapmak istediğiniz HTML öğesini seçmelisiniz. Örneğin, bir düğme veya bir resim olabilir. Bu öğeye bir sınıf veya bir ID atayabilirsiniz.

<button class="my-button">Hover etkisi</button>

CSS stil dosyanıza geçiş yapın ve seçtiğiniz öğeyi hedefleyin. Ardından, :hover pseudo-sınıfını kullanarak hover etkisini tanımlayın.

.my-button {
/* Normal stiller */
}

.my-button:hover {
/* Hover stil değişiklikleri */
}

.my-button sınıfına sahip düğme öğesi normal durumdayken, ilk stil tanımlamalarını içerir. Ancak, .my-button:hover kuralları, düğme üzerine gelindiğinde veya odaklandığında uygulanacak stil değişikliklerini içerir.

Örneğin, düğmenin arka plan rengini ve metin rengini hover durumunda değiştirelim:

.my-button {
background-color: #3498db;
color: #ffffff;
}

.my-button:hover {
background-color: #ffffff;
color: #3498db;
}

Yukarıdaki örnekte, düğme normal durumdayken mavi bir arka plan rengi ve beyaz bir metin rengiyle görünecek. Ancak, üzerine gelindiğinde veya odaklandığında arka plan rengi beyaz, metin rengi ise mavi olarak değişecektir.

CSS hover, animasyonlar, geçişler (transitions), yansımalar (box-shadow) ve diğer stil değişiklikleri gibi birçok farklı kullanım için uygundur. Önemli olan, kullanıcı deneyimini geliştirmek ve web sitenizi daha etkileşimli hale getirmek için hover etkisini yaratıcı bir şekilde kullanmaktır.

| |