Wie zeige ich zusätzliche Informationen zum Element-Hover mithilfe von CSS an?

So markieren Sie ein Element beim Hover und zeigen zusätzliche Informationen an

Sie stehen vor einem Problem, bei dem Sie ein Dropdown-Menü anzeigen möchten -ähnlicher Bereich, wenn Sie mit der Maus über ein bestimmtes Element fahren, aber die von Ihnen angegebene Methode funktioniert nicht wie erwartet. Lassen Sie uns eine Lösung für dieses Problem finden.

Ein Ansatz ist die Verwendung von CSS, aber nur, wenn das versteckte Div ein direktes untergeordnetes Element des Elements ist, über das Sie den Mauszeiger bewegen. So geht's:

#cheetah {
  position: relative;
}

#hidden {
  position: absolute;
  display: none;
  background-color: black;
}

#cheetah:hover #hidden {
  display: block;
  background-color: orange;
}

In diesem Code setzen wir die Position des „#cheetah“-Divs auf „relative“, wodurch untergeordnete Elemente relativ dazu positioniert werden können. Dann setzen wir die Position des „#hidden“-Divs auf „absolute“ und seinen anfänglichen Anzeigestil auf „none“. Wenn Sie mit der Maus über „#cheetah“ fahren, verwenden wir den „Hover“-Selektor, um den Anzeigestil von „#hidden“ in „blockieren“ zu ändern und die Hintergrundfarbe auf Orange zu aktualisieren.

Denken Sie daran, dass nur diese Methode funktioniert wenn das „#hidden“-Div ein direktes untergeordnetes Element des Elements ist, über dem Sie den Mauszeiger halten. In diesem Fall können Sie die gewünschte Funktionalität allein mit CSS erreichen. Andernfalls müssen Sie möglicherweise andere Ansätze in Betracht ziehen, z. B. die Verwendung von JavaScript, um den gewünschten Effekt zu erzielen.

Das obige ist der detaillierte Inhalt vonWie zeige ich zusätzliche Informationen zum Element-Hover mithilfe von CSS an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!