Çalıştırılabilir CSS Dokümanları: CSS hover

Q: CSS'te hover efekti nasıl eklenir?

Seçiciden sonra :hover olan bir kural yaz: .btn:hover { background: #1d4ed8; }. Bildirimler, imleç elementin üzerindeyken uygulanır. Değişimi canlandırmak için normal kurala transition: background 0.2s; ekle.

Q: :hover ile :active arasındaki fark nedir?

:hover, imleç elementin üzerindeyken uygulanır. :active ise element basılı tutulurken, fare tuşu inişinden bırakılana kadar uygulanır. Basılan bir buton genellikle hem hover hem active durumundadır.

Q: Link sözde sınıfları hangi sırada olmalı?

:link, :visited, :hover, :active (LVHA olarak ya da İngilizce "LoVe HAte" diye aklında tut). Özgüllükleri eşittir, bu yüzden sonraki kural kazanır; başka herhangi bir sırada visited ya da hover stili, hover veya active stilini gizleyebilir.

Q: CSS'te link rengi nasıl değiştirilir?

a elementine stil ver: a { color: #2563eb; }, ardından diğer durumlar için a:visited { color: #7c3aed; } ve a:hover { color: #1d4ed8; }. a üzerinde color ayarlamak hem ziyaret edilmemiş hem ziyaret edilmiş linkleri kapsar.

:hover nasıl çalışır

:hover, fare imleci bir elementin üzerindeyken onunla eşleşen bir sözde sınıftır. Onu herhangi bir seçiciye ekle ve hover durumunun stillerini yaz:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hover</title>
  <style>
    .btn {
      background: #2563eb;
      color: white;
      border: 0;
      padding: 10px 18px;
      border-radius: 6px;
      font-size: 16px;
      cursor: pointer;
    }
    .btn:hover {
      background: #1d4ed8;
    }
  </style>
</head>
<body>
  <button class="btn">Hover me</button>
</body>
</html>

Yalnızca :hover kuralındaki bildirimler değişir; geri kalan her şey .btn'den gelir. İmleç ayrıldığında element normal stillerine döner.

transition ile yumuşak hover efektleri

Bir hover değişimi, transition'ı normal kurala (:hover kuralına değil) eklemedikçe anlıktır; bu şekilde hem girişte hem çıkışta canlanır:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hover transition</title>
  <style>
    .card {
      width: 220px;
      padding: 16px;
      border: 2px solid #e5e7eb;
      border-radius: 10px;
      background: white;
      transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    }
    .card:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 20px rgba(17, 24, 39, 0.15);
      border-color: #2563eb;
    }
  </style>
</head>
<body>
  <div class="card">Hover the card: it lifts, gains a shadow and a blue border.</div>
</body>
</html>

transform ve opacity, canlandırması en ucuz özelliklerdir; çevrelerindeki elementleri yerinden oynatmazlar. width, height ya da margin canlandırmak ise sayfanın her karede yeniden yerleşim yapmasına neden olur. Süreler, gecikmeler ve hızlanma eğrileri CSS transition sayfasında anlatılıyor.

Link renkleri: :link, :visited, :hover, :active

Linklerin dört klasik durumu ve bir de klavye odağı vardır; kuralların sırası önemlidir:

Sözde sınıf	Ne zaman uygulanır
`:link`	Link ziyaret edilmemişse
`:visited`	URL tarayıcı geçmişinde varsa
`:hover`	İmleç üzerindeyse
`:active`	Basılıyorsa
`:focus-visible`	Klavye odağı ondaysa

Bunların hepsi aynı özgüllüğe sahiptir, bu yüzden ikisi eşleştiğinde sonraki kural kazanır. Üzerine gelinen ziyaret edilmiş bir link hem :visited hem :hover ile eşleşir; :visited en sonda gelirse hover rengi hiç görünmez. Güvenli sıra Link, Visited, Hover, Active'dir (LVHA):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Link states</title>
  <style>
    a:link    { color: #2563eb; }
    a:visited { color: #7c3aed; }
    a:hover   { color: #16a34a; text-decoration-thickness: 3px; }
    a:active  { color: #f59e0b; }
    a:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
  </style>
</head>
<body>
  <p><a href="https://example.com/never-visited-page">Hover, then press and hold this link</a></p>
</body>
</html>

Tarayıcılar, sayfaların geçmişini okumasını engellemek için :visited'ın neleri değiştirebileceğini sınırlar. Yalnızca renkle ilgili özellikler (color, background-color, border-color, outline-color ve birkaç tane daha) etkili olur ve scriptler her zaman ziyaret edilmemiş değeri görür.

:active: basılı durum

:active, element basılı tutulurken eşleşir. Küçük bir hareket, butonun fiziksel bir şey gibi hissettirmesini sağlar:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Active</title>
  <style>
    .btn {
      background: #16a34a;
      color: white;
      border: 0;
      padding: 10px 18px;
      border-radius: 6px;
      box-shadow: 0 4px 0 #166534;
      transition: transform 0.05s, box-shadow 0.05s;
    }
    .btn:hover { background: #15803d; }
    .btn:active {
      transform: translateY(4px);
      box-shadow: 0 0 0 #166534;
    }
    .btn:focus-visible { outline: 3px solid #2563eb; outline-offset: 3px; }
  </style>
</head>
<body>
  <button class="btn">Press me</button>
</body>
</html>

Çocuğa stil vermek için ebeveynin üzerine gelmek

Hover durumu imlecin altındaki elemente ve onun bütün atalarına aittir. Bu yüzden .card:hover .title, kartın herhangi bir kısmının üzerine gelindiğinde başlığa stil verir; aynı fikir gizli elementleri ortaya çıkarır:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hover parent</title>
  <style>
    .item {
      display: flex;
      justify-content: space-between;
      border: 1px solid #e5e7eb;
      padding: 10px;
      width: 260px;
    }
    .item .actions { opacity: 0; transition: opacity 0.15s; }
    .item:hover .actions,
    .item:focus-within .actions { opacity: 1; }
    .item:hover { background: #eff6ff; }
    .item:hover .name { color: #2563eb; }
  </style>
</head>
<body>
  <div class="item">
    <span class="name">report.pdf</span>
    <span class="actions"><button>Delete</button></span>
  </div>
</body>
</html>

:focus-within satırı önemlidir: o olmadan, Delete butonuna Tab ile gelen bir klavye kullanıcısı görünmez bir butona basardı. Hover ile ortaya çıkan her şeyi bir odak kuralıyla eşleştir.

Dokunmatik ekranlarda hover

Telefonlarda ve tabletlerde bir elementin üzerinde duran bir imleç yoktur. Çoğu mobil tarayıcı :hover'ı ilk dokunuşta uygular ve başka bir yere dokunana kadar tutar, bu yüzden bir hover stili takılı kalmış gibi görünebilir. Bunu iki kural kontrol altında tutar:

İçeriğe ulaşmanın tek yolunu asla :hover'ın arkasına koyma. Hover ile açılan bir menü tıklamayla da açılmalıdır.
Tamamen dekoratif hover efektlerini, gerçek bir hover cihazı olup olmadığını kontrol eden bir medya sorgusunun içine al:

@media (hover: hover) {
  .card:hover { transform: translateY(-4px); }
}

Sık yapılan hatalar

İki noktadan önce boşluk. .btn :hover, ".btn içinde üzerine gelinen bir element" anlamına gelir. .btn:hover yaz.
transition yalnızca :hover kuralında. O zaman girişte canlanır ama çıkışta birden geri döner. Onu normal kurala koy.
Yanlış link sırası. :link, :visited, :hover, :active sırasını koru.
Odak stili olmayan hover. Klavye kullanıcıları :hover'ı hiç tetiklemez; etkileşimli elementlere bir :focus-visible stili de ver.
Başka bir elementin örttüğü elementte hover. Görünmez bir katman (çoğunlukla absolute konumlu bir sözde element) imleci yakalayabilir. Katmana pointer-events: none vermek bunu çözer.

Sıkça Sorulan Sorular

CSS'te hover efekti nasıl eklenir?

Seçiciden sonra :hover olan bir kural yaz: .btn:hover { background: #1d4ed8; }. Bildirimler, imleç elementin üzerindeyken uygulanır. Değişimi canlandırmak için normal kurala transition: background 0.2s; ekle.

:hover ile :active arasındaki fark nedir?

:hover, imleç elementin üzerindeyken uygulanır. :active ise element basılı tutulurken, fare tuşu inişinden bırakılana kadar uygulanır. Basılan bir buton genellikle hem hover hem active durumundadır.

Link sözde sınıfları hangi sırada olmalı?

:link, :visited, :hover, :active (LVHA olarak ya da İngilizce "LoVe HAte" diye aklında tut). Özgüllükleri eşittir, bu yüzden sonraki kural kazanır; başka herhangi bir sırada visited ya da hover stili, hover veya active stilini gizleyebilir.

CSS'te link rengi nasıl değiştirilir?

a elementine stil ver: a { color: #2563eb; }, ardından diğer durumlar için a:visited { color: #7c3aed; } ve a:hover { color: #1d4ed8; }. a üzerinde color ayarlamak hem ziyaret edilmemiş hem ziyaret edilmiş linkleri kapsar.

Hover mobilde çalışır mı?

Dokunmatik ekranlarda bir elementin üzerinde duracak bir imleç yoktur. Çoğu mobil tarayıcı :hover'ı dokunuşta uygular ve başka bir yere dokunana kadar tutar, bu da bir hover stilinin takılı kalmasına yol açabilir. Yalnızca hover'a özel efektleri @media (hover: hover) içine al ve temel içeriği asla hover'ın arkasına saklama.

İlgili kavramlar