Yazar: admin1ankara1 16 Haziran 2023

hover css Kullanımı

CSS’de :hover seçicisi, bir HTML öğesi üzerine fare imleci geldiğinde veya üzerinden geçildiğinde uygulanacak stil değişikliklerini belirlemek için kullanılır. :hover seçicisi, kullanıcı etkileşimiyle öğelerin görünümünü değiştirmek için sıklıkla kullanılır.

:hover seçicisinin kullanımı oldukça basittir. Bir öğeye :hover seçicisi uygulamak için aşağıdaki şekilde CSS kurallarını kullanabilirsiniz:

selector:hover {
  /* Stil değişiklikleri */
}

selector, üzerinde :hover seçicisi uygulanacak olan HTML öğesinin seçicisidir. Örneğin, div:hover bir <div> öğesine fare imleci geldiğinde stil değişikliklerini belirtir.

İşte bazı yaygın kullanılan :hover seçicisi örnekleri:

1. Renk değişimi:

button:hover {
  color: red;
}

Yukarıdaki örnekte, bir <button> öğesine fare imleci geldiğinde metin rengi kırmızıya dönüşecektir.

2. Arka plan değişimi:

a:hover {
  background-color: yellow;
}

Bu örnekte, bir <a> bağlantı öğesine fare imleci geldiğinde arka plan rengi sarıya dönüşecektir.

3. Boyut değişimi:

img:hover {
  width: 200px;
  height: 200px;
}

Bu örnekte, bir <img> resim öğesine fare imleci geldiğinde boyutu 200 piksel genişliğe ve 200 piksel yüksekliğe dönüşecektir.

:hover seçicisi, diğer CSS özellikleriyle birlikte kullanılabilir ve istediğiniz herhangi bir stil değişikliğini uygulamak için kullanılabilir. Önemli olan nokta, :hover seçicisiyle belirlediğiniz stil değişikliklerinin kullanıcı deneyimini iyileştirmek veya görsel geribildirim sağlamak amacıyla uygun ve anlamlı olmasıdır.

Daha Fazla Bilgi İçin Web Tasarım Ankara Ekibimizle İletişime Geçebilirsiniz.