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

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!