---
title: "Wie man die Hover-Farbe der Header-Optionen ändert"
slug: "how-to-change-the-hover-color-of-the-header-options"
description: "You would want to change the hover color of the header options at the article top. You can customize the hover color as per your requirement."
tags: ["Customization", "Knowledge base design"]
updated: 2026-06-22T08:43:25Z
published: 2026-06-22T08:43:25Z
canonical: "docs.document360.com/how-to-change-the-hover-color-of-the-header-options"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.document360.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Wie man die Hover-Farbe der Header-Optionen ändert

Standardmäßig zeigen Header-Navigationslinks auf Ihrer Wissensdatenbank keine Farbänderung, wenn Leser darüber fahren. Das Hinzufügen einer Hover-Farbe gibt den Lesern ein klares visuelles Signal, dass die Header-Optionen interaktive Links sind, verbessert die Navigationsfreundlichkeit und ermöglicht es Ihnen, den Hover-Effekt an Ihre Markenpalette anzupassen.

---

## Wann sollte man das verwenden

Nutzen Sie diese Anpassung, wenn Sie möchten:

- Lassen Sie Header-Navigationslinks visuell auf das Hover reagieren, damit die Leser sie als anklickbar erkennen.
- Wenden Sie eine markenkonsistente Hover-Farbe auf die Header-Navigation auf Ihrer gesamten Wissensdatenbank an.
- Ersetzen Sie das Hover-Verhalten eines Standard-Themas, das nicht zu Ihren Designanforderungen passt.

---

## Bevor du anfängst

- Du brauchst Zugriff auf die **Einstellungen** (

) > **Wissensdatenbank-Seite** > **Site-Anpassung** > **benutzerdefiniertes CSS und JavaScript** im Knowledge Base-Portal.
- Halte deinen gewünschten HEX-Farbcode bereit. Das Standard-Snippet wird als Platzhalter verwendet `red` ; ersetze das durch deinen tatsächlichen Farbwert.

---

## Wie man die Header-Hover-Farbe ändert

1. Navigiere zu **den Einstellungen** (

) > **Wissensdatenbank-Seite** > **Site-Anpassung** > **benutzerdefiniertes CSS und JavaScript** im Knowledge Base-Portal.

![Custom CSS and JavaScript settings panel in the Document360 Knowledge base portal](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Custom%20css%20&%20js.png)
2. Wählen Sie im linken Navigationsbereich den **CSS-Tab** aus und fügen Sie den folgenden Ausschnitt ein.

```
a[role="menuitem"]:hover {
    color: red !important;
    text-decoration: none;
}
```

1. Ersetzen Sie `red` zum Beispiel einen HEX-Wert `#0077cc` oder einen RGB-Wert durch die gewünschte Hover-Farbe.
2. Klicken **Sie auf Speichern**.

![CSS tab showing the header hover color snippet saved in the Custom CSS and JavaScript panel](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/image-1767002579133.png)

---

## Ergebnis

**Vorher**

Wenn die Leser über die Navigationsoptionen des Headers fahren, gibt es keine Farbänderung und die Links erscheinen statisch.

![Header navigation links with no visible color change on hover](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/3_Screenshot-Header_Color_before_hovering.png)

**Danach**

Wenn die Leser mit der Maus über die Navigationsoptionen im Header fahren, ändert sich die Linkfarbe zur angegebenen Farbe, was ein klares visuelles Feedback gibt, dass das Element interaktiv ist.

![Header navigation links showing a red hover color after applying the CSS](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/2_Screenshot-Header_Color_while_hovering.png)

---

## Best Practices

- **Verwenden Sie einen HEX- oder RGB-Farbwert statt eines Farbnamens.** CSS-Farbnamen sind `red` ungenau und stimmen selten exakt mit Markenpaletten überein. Ersetzen Sie `red` durch Ihren spezifischen HEX-Code für genaue und konsistente Ergebnisse.
- **Stellen Sie sicher, dass die Hover-Farbe im Kontrast zum Hintergrund des Headers steht.** Eine Schwebefarbe, die zu nah an der Hintergrundfarbe des Headers liegt, ist kaum wahrnehmbar. Teste die visuelle Veränderung in deiner Live-Wissensdatenbank nach dem Speichern.
- **Behalten Sie `!important`.** Die Knowledge Base-Seite verwendet eigene Theme-Stile, die die Standard-CSS-Spezifität überschreiben können. Das Entfernen `!important` kann dazu führen, dass die Schwebefarbe in manchen Theme-Konfigurationen nicht mehr angewendet wird.
- **Test nach dem Speichern.** Öffnen Sie Ihre Wissensdatenbank-Seite und fahren Sie mit der Maus über jedes Header-Navigationselement, um zu bestätigen, dass die Farbänderung sichtbar und konsistent über alle Links hinweg ist.