Wie kann ich untergeordnete Elemente formatieren, wenn sich ihr übergeordnetes Element darüber befindet?

Anpassen der Stile untergeordneter Elemente beim Bewegen des Mauszeigers über ein übergeordnetes Element

Sie können den Stil eines untergeordneten Elements mithilfe von CSS ändern, wenn der Mauszeiger über das übergeordnete Element bewegt wird. Um dies zu erreichen, verwenden Sie die Pseudoklasse :hover.

.parent:hover .child {
  /* Styles applied here will affect child elements when the parent is hovered */
}

Diese Regel wählt alle untergeordneten Elemente innerhalb eines übergeordneten Elements aus, das sich derzeit im Schwebezustand befindet. Die in den geschweiften Klammern angewendeten Stile werden nur dann auf die untergeordneten Elemente angewendet, wenn der Mauszeiger über das übergeordnete Element bewegt wird.

Zum Beispiel, wenn Sie die Farbe eines Dropdown-Menüs ändern müssen, während das übergeordnete Menüelement angezeigt wird Wenn Sie den Mauszeiger darüber bewegen, können Sie das folgende CSS verwenden:

.menu-item:hover .drop-down-menu {
  background-color: #ccc;
}

Dadurch wird die Hintergrundfarbe des Dropdown-Menüs in Hellgrau geändert, wenn der Mauszeiger über den entsprechenden Menüpunkt bewegt wird, was einen visuellen Hinweis darauf gibt der Benutzer.

Das obige ist der detaillierte Inhalt vonWie kann ich untergeordnete Elemente formatieren, wenn sich ihr übergeordnetes Element darüber befindet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!