Wie ändere ich das Erscheinungsbild eines Elements, wenn ich mit der Maus über ein anderes Element in CSS fahre?

Ändern des Erscheinungsbilds eines Elements beim Bewegen des Mauszeigers über ein anderes mithilfe von CSS

Im Bereich des CSS-Stils ist es oft wünschenswert, das Erscheinungsbild eines Elements zu ändern wenn der Cursor über einem anderen schwebt. Dies kann durch eine Kombination aus Selektoren und der Pseudoklasse :hover erreicht werden.

Stellen Sie sich das folgende Szenario vor: Sie haben ein Containerelement (z. B. ein Div) und ein verstecktes Element (z. B. ein anderes Div). enthält zusätzliche Informationen. Wenn Sie mit der Maus über das Containerelement fahren, soll das ausgeblendete Element erscheinen und seinen Inhalt anzeigen.

Im bereitgestellten Beispiel:

<div>
<pre class="brush:php;toolbar:false">a:hover + #hidden {
  background-color: orange;
  color: orange;
}

Leider funktioniert dieser Ansatz nicht. Das funktioniert nicht, da das #hidden-Div kein direktes untergeordnetes Element des a-Elements ist. Um dieses Problem zu beheben, stellen Sie sicher, dass das ausgeblendete Element ein untergeordnetes Element des Elements ist, für das Sie den Hover-Effekt auslösen möchten.

<div><p>Mit dieser Änderung identifiziert der a:hover #hidden-Selektor das Ausgeblendete korrekt Element und wenden Sie die gewünschten Stile an, wenn der Cursor über dem a-Element schwebt.</p></div>