X
Ankara Web Tasarim
Anasayfa --- Css --- hover css Kullanımı
Ankara Web Tasarım Blog Foto

Yazar: 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.

  1. 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.

  1. 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.

Hover CSS, HTML elementlerine fareyle üzerine gelindiğinde (hover edildiğinde) farklı bir stil uygulanmasına olanak tanıyan bir CSS özelliğidir. Bu etkileşim, kullanıcı deneyimini iyileştirmek için web sayfalarında yaygın olarak kullanılır. CSS’teki :hover seçici, kullanıcı fareyi bir elementin üzerine getirdiğinde o elementin stilini değiştirir.

Genel Kullanım

CSS’te :hover seçicisi şu şekilde kullanılır:

cssKodu kopyalaelement:hover {
  /* Stil kuralları */
}

Örnek

Aşağıda bir düğme (button) öğesi için basit bir hover efekti gösterilmiştir:

htmlKodu kopyala<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hover Örneği</title>
  <style>
    button {
      background-color: #4CAF50; /* Yeşil */
      color: white;
      padding: 10px 20px;
      border: none;
      cursor: pointer;
      font-size: 16px;
    }

    button:hover {
      background-color: #45a049; /* Farenin üzerine gelindiğinde daha koyu yeşil */
    }
  </style>
</head>
<body>
  <button>Üzerime Gel!</button>
</body>
</html>

Bu örnekte, düğme normalde yeşil renkte görünürken, fareyle üzerine gelindiğinde arka plan rengi daha koyu bir yeşile dönüşür. Aynı zamanda düğme stili başka özelliklerle de özelleştirilebilir, örneğin kenarlıklar, gölgeler ya da dönüşüm efektleri eklenebilir.

Hover CSS Kullanım Alanları

  • Bağlantılar: Genellikle web sayfalarında linklerin üzerine gelindiğinde renk değiştirmesi için kullanılır.
  • Butonlar: Hover efekti ile butonlar daha etkileşimli ve dikkat çekici hale getirilebilir.
  • Resimler: Resimlerin üzerine gelindiğinde büyüme, bulanıklaşma veya opaklık değişimi gibi efektler uygulanabilir.
  • Kartlar: Web sitelerinde bilgi kartlarının üzerine gelindiğinde büyütme veya gölge efektleri ile öne çıkması sağlanabilir.

İleri Düzey Hover Efektleri

Daha karmaşık hover efektleri için transform, transition, box-shadow, opacity gibi CSS özellikleri de kullanılabilir.

cssKodu kopyala.card:hover {
  transform: scale(1.05); /* Hafif büyütme */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Gölge efekti */
  transition: all 0.3s ease-in-out; /* Geçiş animasyonu */
}

Bu örnekte, bir kart hover edildiğinde hafifçe büyür ve gölgelendirilir. Geçiş animasyonu ile de bu efektler daha yumuşak hale gelir.

Hover CSS, sitenizin daha dinamik ve ilgi çekici görünmesine yardımcı olur.