Heim >Web-Frontend >CSS-Tutorial >Wie kann ich dafür sorgen, dass ein ausgeblendetes Element seine Hintergrundfarbe ändert, wenn ich den Mauszeiger über sein übergeordnetes Element bewege?

Wie kann ich dafür sorgen, dass ein ausgeblendetes Element seine Hintergrundfarbe ändert, wenn ich den Mauszeiger über sein übergeordnetes Element bewege?

Patricia Arquette
Patricia ArquetteOriginal
2024-11-22 03:04:15673Durchsuche

How do I make a hidden element change its background color when hovering over its parent element?

Elemente beim Hover mit CSS manipulieren

Beim Versuch, ein interaktives Element zu erstellen, sind Sie auf Schwierigkeiten gestoßen, CSS-Hover-Effekte zu verstehen. Konkret möchten Sie zusätzliche Informationen anzeigen, wenn Sie mit der Maus über ein bestimmtes Element fahren, aber der bereitgestellte Code scheint wirkungslos zu sein.

Um dieses Problem zu beheben, denken Sie daran, dass Sie in CSS Hover-Effekte nur auf Elemente implementieren können Das sind die direkten Nachkommen des Elements, über dem Sie schweben.

Bedenken Sie den folgenden Code:

#cheetah {
  background-color: red;
  color: yellow;
  text-align: center;
}

a {
  color: blue;
}

#hidden {
  background-color: black;
}

a:hover > #hidden {
  background-color: orange;
  color: orange;
}

In diesem Snippet: Das versteckte Div ist direkt in dem Element verschachtelt, über dem sich der Mauszeiger befindet (dem Anker-Tag mit dem Text „Cheetah“). Diese Änderung stellt sicher, dass die Eigenschaften des versteckten Divs geändert werden, wenn Sie mit der Maus über das Ankertag fahren.

Eine Live-Demonstration dieses Codes finden Sie unter dieser URL: http://jsfiddle.net/LgKkU/

Das obige ist der detaillierte Inhalt vonWie kann ich dafür sorgen, dass ein ausgeblendetes Element seine Hintergrundfarbe ändert, wenn ich den Mauszeiger über sein übergeordnetes Element bewege?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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