Warum ändert sich nur die Farbe des Links in meinem Div, wenn ich mit der Maus darüber fahre?-CSS-Tutorial-php.cn

Warum ändert sich nur die Farbe des Links in meinem Div, wenn ich mit der Maus darüber fahre?

Susan Sarandon

Freigeben： 2024-11-03 20:37:02

Original

706 Leute haben es durchsucht

Why is only the link inside my div changing color when I hover over it?

So ändern Sie die Hintergrundfarbe eines gesamten Divs, wenn Sie mit der Maus darüber fahren

Sie versuchen, die Hintergrundfarbe eines Divs zu ändern, wenn Sie mit der Maus darüber fahren Es. Sie haben jedoch bemerkt, dass nur der Link innerhalb des Div seine Farbe ändert.

Ursache des Problems

Die CSS-Regel „a:hover“, die Sie speziell definiert haben zielt auf Element innerhalb der div. Diese Regel ändert das Linkelement nur, wenn Sie mit der Maus darüber fahren.

Lösung

Um die Hintergrundfarbe des gesamten Div zu ändern, müssen Sie die Hover-Regel auf das Div anwenden selbst. Ersetzen Sie das CSS „a:hover“ durch „div:hover“. Hier ist ein Beispiel:

<code class="css">div {
  background: white;
}
div:hover {
  background: gray;
}</code>

Nach dem Login kopieren

Das gesamte Div anklickbar machen

Um das gesamte Div anklickbar zu machen, können Sie es mit dem Befehl in einen Link umwandeln. Etikett. Binden Sie Ihren Div-Inhalt in ein Anker-Tag ein und geben Sie die entsprechende Ziel-URL an. Zum Beispiel:

<code class="html"><a href="https://example.com">
  <div>
    Click Me!
  </div>
</a></code>

Nach dem Login kopieren

Zusätzliche Hinweise:

Um den Hover-Effekt auf ein bestimmtes Div anzuwenden, geben Sie ihm eine eindeutige ID (z. B. < div id="myDiv">) und verwenden Sie den CSS-Selektor „#myDiv:hover {...}“
Erstellen Sie für eine Gruppe von Divs eine Klasse (z. B.
) und verwenden Sie den CSS-Selektor ".myClass {...}"

Das obige ist der detaillierte Inhalt vonWarum ändert sich nur die Farbe des Links in meinem Div, wenn ich mit der Maus darüber fahre?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!