Hover Efektleri

Coddy'nin HTML Journey'sinin CSS Mastery bölümünün bir parçası — ders 8 / 43.

:hover sözde sınıfı, kullanıcı faresini bir öğenin üzerine getirdiğinde öğenin stilini değiştirmenize olanak tanır.

Bir düğmenin üzerine geldiğinizde metin rengini değiştiren basit bir örnek:

button {
  color: black;
}

button:hover {
  color: red;
}

Bu örnekte, düğme metni varsayılan olarak siyahtır, ancak üzerine geldiğinizde metin kırmızıya döner.

Kendini test et

Bu ders kısa bir quiz içerir. Soruları yanıtlamak ve ilerlemeni kaydetmek için derse başla.

Kendini test et

Bu ders kısa bir quiz içerir. Soruları yanıtlamak ve ilerlemeni kaydetmek için derse başla.

Görev

Kolay

Üzerine gelindiğinde stili değişmesi gereken bir butonunuz var. Göreviniz şunları yapmaktır:

Kullanıcı butonun üzerine geldiğinde butonun arka plan rengini green olarak değiştirmek için :hover sözde sınıfını kullanın.
Hover efekti sırasında butona, yükseltilmiş gibi görünmesini sağlamak için bir kutu gölgesi uygulayın. box-shadow özelliğini şu şekilde kullanın:

box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);

Bu; ofset, bulanıklık ve renk içeren bir gölge ekler.

Kopya kağıdı

:hover sözde sınıfı (pseudo-class), kullanıcı faresini üzerine getirdiğinde bir öğenin stilini değiştirir:

button {
  color: black;
}

button:hover {
  color: red;
}

Bu örnekte, buton metni varsayılan olarak siyahtır, ancak üzerine geldiğinizde metin kırmızıya döner.

Kendin dene

<html>
<head>
    <title>Hover Effects</title>
    <style>
        .hover-button {
            padding: 10px 20px;
            font-size: 16px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 5px;
        }
        /* CSS solution goes here */
        
    </style>
</head>
<body>
    <button class="hover-button">Hover over me!</button>
</body>
</html>

Kendini test et

Bu ders kısa bir quiz içerir. Soruları yanıtlamak ve ilerlemeni kaydetmek için derse başla.