Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Warum ändert mein Div beim Schweben nicht die Farbe, sondern nur der darin enthaltene Link?

DDD
Freigeben: 2024-11-03 18:43:02
Original
353 Leute haben es durchsucht

Why doesn't my div change color on hover, only the link inside it?

Ändern der Div-Hintergrundfarbe beim Bewegen des Mauszeigers

F: Ich versuche, die Hintergrundfarbe eines Divs zu ändern, wenn die Maus darüber fährt. Ich habe versucht, den unten bereitgestellten CSS-Code zu verwenden, aber nur der Link innerhalb des Div ändert seine Farbe. Wie kann ich dafür sorgen, dass das gesamte Div beim Schweben die Farbe ändert?

CSS-Code:

the div {background: white;}
the div a:hover {background: grey; width: 100%; display: block; text-decoration: none;}
Nach dem Login kopieren

A: Das „a:hover“ in Ihrem CSS-Code zielt speziell auf das -Tag ab. Dadurch ändert sich beim Schweben nur die Farbe des Links. Um die Hintergrundfarbe des gesamten Div zu ändern, müssen Sie stattdessen „the div:hover“ verwenden. Hier ist der korrigierte Code:

the div {background: white;}
the div:hover {background: grey;}
Nach dem Login kopieren

Wenn Sie möchten, dass das gesamte Div als Link fungiert, können Sie außerdem ein -Tag mit der gewünschten Linkadresse hinzufügen:

<a href="link_address">
  <div style="background: white;">
    ...
  </div>
</a>
Nach dem Login kopieren

Beachten Sie: Wenn Sie nur ein bestimmtes Div ändern möchten, können Sie ihm im HTML eine ID oder Klasse zuweisen und es mithilfe dieser Kennung in Ihrem CSS als Ziel festlegen.

Das obige ist der detaillierte Inhalt vonWarum ändert mein Div beim Schweben nicht die Farbe, sondern nur der darin enthaltene Link?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage