אפקטים בעת ריחוף

חלק מהיחידה שליטה ב-CSS במסלול ה-HTML של Coddy. שיעור 8 מתוך 43.

המחלקה המדומה :hover מאפשרת לך לשנות את הסגנון של רכיב כשהמשתמש מרחף מעליו עם העכבר.

הנה דוגמה פשוטה שמשנה את צבע הטקסט כשמעבירים את הסמן מעל לחצן:

button {
  color: black;
}

button:hover {
  color: red;
}

בדוגמה הזו, טקסט הלחצן שחור כברירת מחדל, אבל כשמעבירים את הסמן מעליו, הטקסט הופך לאדום.

אתגר

קל

יש לך כפתור שצריך לשנות את הסגנון שלו בעת ריחוף מעליו. המשימה שלך היא:

השתמש במחלקת הפסאודו :hover כדי לשנות את צבע הרקע של הכפתור לירוק כשהמשתמש מרחף מעליו.
החל צל על הכפתור במהלך אפקט הריחוף כדי שייראה כאילו הוא מורם. השתמש ב-box-shadow כך:

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

הוא מוסיף צל עם היסט, טשטוש וצבע.

נסו בעצמכם

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