תיעוד CSS עם דוגמאות להרצה: Hover ב-CSS

Q: איך מוסיפים אפקט hover ב-CSS?

כתבו כלל עם :hover אחרי הסלקטור: .btn:hover { background: #1d4ed8; }. ההצהרות חלות כל עוד הסמן נמצא מעל האלמנט. הוסיפו transition: background 0.2s; לכלל הרגיל כדי להנפיש את השינוי.

Q: מה ההבדל בין :hover ל-:active?

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

Q: באיזה סדר צריך לכתוב את הפסאודו-קלאסים של קישורים?

:link, :visited, :hover, :active (זכרו LVHA, או "LoVe HAte" באנגלית). לכולם אותה ספציפיות, ולכן הכלל המאוחר מנצח; בכל סדר אחר, סגנון של קישור שבוקר או של hover עלול להסתיר את סגנון ה-hover או ה-active.

Q: איך משנים את צבע הקישורים ב-CSS?

עצבו את האלמנט a: a { color: #2563eb; }, ואחר כך a:visited { color: #7c3aed; } ו-a:hover { color: #1d4ed8; } לשאר המצבים. הגדרת color על a חלה גם על קישורים שלא בוקרו וגם על קישורים שבוקרו.

איך :hover עובד

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

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

רק ההצהרות שבכלל :hover משתנות; כל השאר נשאר כמו ב-.btn. כשהסמן יוצא, האלמנט חוזר לסגנונות הרגילים שלו.

אפקטי hover חלקים עם transition

שינוי ב-hover הוא מיידי, אלא אם מוסיפים transition לכלל הרגיל (לא לכלל :hover), וכך השינוי מונפש גם בכניסה וגם ביציאה:

<!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 ו-opacity הם המאפיינים הזולים ביותר להנפשה; הם לא מזיזים את האלמנטים שמסביבם. הנפשה של width, height או margin גורמת לדף לחשב מחדש את הפריסה בכל פריים. משכי זמן, השהיות ועקומות האצה מופיעים בדף של transition ב-CSS.

צבעי קישורים: :link, :visited, :hover, :active

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

פסאודו-קלאס	חל כאשר
`:link`	הקישור עוד לא בוקר
`:visited`	הכתובת נמצאת בהיסטוריית הדפדפן
`:hover`	הסמן נמצא מעליו
`:active`	לוחצים עליו כרגע
`:focus-visible`	יש עליו פוקוס מקלדת

לכולם אותה ספציפיות, ולכן כששניים תואמים, הכלל המאוחר מנצח. קישור שבוקר ונמצא במצב hover תואם גם את :visited וגם את :hover; אם :visited מופיע אחרון, צבע ה-hover לעולם לא יוצג. הסדר הבטוח הוא Link, Visited, Hover, Active (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>

הדפדפנים מגבילים את מה ש-:visited יכול לשנות, כדי שדפים לא יוכלו לקרוא את ההיסטוריה שלכם. רק מאפיינים שקשורים לצבע (color, background-color, border-color, outline-color ועוד כמה) משפיעים, וסקריפטים תמיד רואים את הערך של קישור שלא בוקר.

:active: המצב הלחוץ

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

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

hover על הורה כדי לעצב ילד

מצב ה-hover שייך לאלמנט שמתחת לסמן ולכל האבות שלו. לכן .card:hover .title מעצב את הכותרת בכל פעם שחלק כלשהו של הכרטיס נמצא במצב hover, ואותו רעיון חושף אלמנטים מוסתרים:

<!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 חשובה: בלעדיה, משתמש מקלדת שמגיע ב-Tab לכפתור Delete היה לוחץ על כפתור בלתי נראה. צרפו לכל חשיפה ב-hover גם כלל של פוקוס.

hover במסכי מגע

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

לעולם אל תשימו מאחורי :hover את הדרך היחידה להגיע לתוכן. תפריט שנפתח ב-hover צריך להיפתח גם בלחיצה.
עטפו אפקטי hover דקורטיביים בלבד ב-media query שבודקת אם יש מכשיר עם hover אמיתי:

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

טעויות נפוצות

רווח לפני הנקודתיים. .btn :hover פירושו "אלמנט במצב hover בתוך .btn". כתבו .btn:hover.
transition רק בכלל :hover. אז השינוי מונפש בכניסה אבל קופץ חזרה ביציאה. שימו אותו בכלל הרגיל.
סדר קישורים שגוי. שמרו על :link, :visited, :hover, :active בסדר הזה.
hover בלי סגנון פוקוס. משתמשי מקלדת אף פעם לא מפעילים :hover; תנו לאלמנטים אינטראקטיביים גם סגנון :focus-visible.
hover על אלמנט שמכוסה באלמנט אחר. שכבה בלתי נראית מעליו (לרוב פסאודו-אלמנט עם מיקום absolute) עלולה לתפוס את הסמן. pointer-events: none על השכבה פותר את זה.

שאלות נפוצות

איך מוסיפים אפקט hover ב-CSS?

כתבו כלל עם :hover אחרי הסלקטור: .btn:hover { background: #1d4ed8; }. ההצהרות חלות כל עוד הסמן נמצא מעל האלמנט. הוסיפו transition: background 0.2s; לכלל הרגיל כדי להנפיש את השינוי.

מה ההבדל בין :hover ל-:active?

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

באיזה סדר צריך לכתוב את הפסאודו-קלאסים של קישורים?

:link, :visited, :hover, :active (זכרו LVHA, או "LoVe HAte" באנגלית). לכולם אותה ספציפיות, ולכן הכלל המאוחר מנצח; בכל סדר אחר, סגנון של קישור שבוקר או של hover עלול להסתיר את סגנון ה-hover או ה-active.

איך משנים את צבע הקישורים ב-CSS?

עצבו את האלמנט a: a { color: #2563eb; }, ואחר כך a:visited { color: #7c3aed; } ו-a:hover { color: #1d4ed8; } לשאר המצבים. הגדרת color על a חלה גם על קישורים שלא בוקרו וגם על קישורים שבוקרו.

האם hover עובד בנייד?

במסכי מגע אין סמן שנשאר מעל אלמנט. רוב הדפדפנים בנייד מפעילים :hover בהקשה ומשאירים אותו עד שמקישים במקום אחר, וכך סגנון hover עלול להיתקע. עטפו אפקטים שהם hover בלבד ב-@media (hover: hover) ולעולם אל תסתירו תוכן חיוני מאחורי hover.

מושגים קשורים