Wie sich andere Elemente beeinflussen lassen, wenn ein Element schwebt

Question

Was ich tun möchte, ist, dass wenn ein bestimmtes div berührt wird, es die Eigenschaften eines anderen div beeinflusst.

Zum Beispiel in diesem JSFiddle-Demo, wenn du über #cube fährst, ändert es die background-color, aber was ich möchte ist, dass wenn ich über #container fahre, #cube betroffen ist.

div {
  outline: 1px solid red;
}

#container {
  width: 200px;
  height: 30px;
}

#cube {
  width: 30px;
  height: 100%;
  background-color: red;
}

#cube:hover {
  width: 30px;
  height: 100%;
  background-color: blue;
}

Answer 1

Wenn der Würfel sich direkt innerhalb des Containers befindet:

#container:hover > #cube { background-color: yellow; }

Wenn der Würfel neben dem Container steht (nach dem Schließtag des Containers):

#container:hover + #cube { background-color: yellow; }

Wenn der Würfel sich irgendwo im Inneren des Containers befindet:

#container:hover #cube { background-color: yellow; }

Wenn der Würfel ein Geschwister des Containers ist:

#container:hover ~ #cube { background-color: yellow; }

Answer 2

In diesem speziellen Beispiel kannst du Folgendes verwenden:

#container:hover #cube {
    background-color: yellow;   
}

Dieses Beispiel funktioniert nur, da cube ein Kind von container ist. Für kompliziertere Szenarien müsstest du unterschiedliches CSS verwenden oder JavaScript einsetzen.

Answer 3

Die Nutzung des Geschwister-Selektors ist die allgemeine Lösung, um andere Elemente zu stylen, wenn über einem bestimmten Element gehovert wird, aber es funktioniert nur, wenn die anderen Elemente dem gegebenen Element im DOM folgen. Was können wir tun, wenn die anderen Elemente tatsächlich vor dem gehoverten sein sollten? Nehmen wir an, wir möchten ein Signalbalken-Bewertungselement implementieren, wie das untenstehende:

Dies kann tatsächlich einfach mit dem CSS-Flexbox-Modell erreicht werden, indem flex-direction auf reverse gesetzt wird, sodass die Elemente in der entgegengesetzten Reihenfolge angezeigt werden, in der sie im DOM angeordnet sind. Der obige Screenshot stammt von einem solchen Widget, das mit reinem CSS implementiert wurde.

Flexbox wird von 95% der modernen Browser sehr gut unterstützt.

.rating {
  display: flex;
  flex-direction: row-reverse;
  width: 9rem;
}
.rating div {
  flex: 1;
  align-self: flex-end;
  background-color: black;
  border: 0.1rem solid white;
}
.rating div:hover {
  background-color: lightblue;
}
.rating div[data-rating="1"] {
  height: 5rem;
}
.rating div[data-rating="2"] {
  height: 4rem;
}
.rating div[data-rating="3"] {
  height: 3rem;
}
.rating div[data-rating="4"] {
  height: 2rem;
}
.rating div[data-rating="5"] {
  height: 1rem;
}
.rating div:hover ~ div {
  background-color: lightblue;
}

Answer 4

Nur das hat bei mir funktioniert:

#container:hover .cube { background-color: yellow; }

Wo .cube ist CssClass irgendwo innerhalb des #container.

Getestet in Firefox, Chrome und Edge.

Answer 5

Hier ist eine weitere Idee, die es Ihnen erlaubt, andere Elemente zu beeinflussen, ohne einen bestimmten Selektor zu berücksichtigen und nur den :hover-Zustand des Hauptelements zu verwenden.

Dafür werde ich auf die Verwendung von benutzerdefinierten Eigenschaften (CSS-Variablen) zurückgreifen. Wie wir in der Spezifikation lesen können:

Benutzerdefinierte Eigenschaften sind normale Eigenschaften, daher können sie auf jedem Element deklariert werden, werden mit normaler Vererbung und Cascade-Regeln aufgelöst...

Die Idee ist, benutzerdefinierte Eigenschaften im Hauptelement zu definieren und sie zu verwenden, um untergeordnete Elemente zu gestalten. Da diese Eigenschaften vererbt werden, müssen wir sie nur im Hauptelement bei hover ändern.

Hier ist ein Beispiel:

#container {
  width: 200px;
  height: 30px;
  border: 1px solid var(--c);
  --c:red;
}
#container:hover {
  --c:blue;
}
#container > div {
  width: 30px;
  height: 100%;
  background-color: var(--c);
}

Warum kann dies besser sein als die Verwendung eines spezifischen Selektors in Kombination mit :hover?

Ich kann mindestens 2 Gründe nennen, die diese Methode zu einer guten machen, die in Betracht gezogen werden sollte:

1. Wenn wir viele verschachtelte Elemente haben, die dieselben Stile teilen, wird dies vermeiden, dass wir einen komplexen Selektor verwenden müssen, um alle beim Hovern zu zielen. Mit benutzerdefinierten Eigenschaften ändern wir einfach den Wert beim Überfahren des Elternelements.
2. Ein benutzerdefinierte Eigenschaft kann einen Wert von jeder Eigenschaft und auch einen Teilwert davon ersetzen. Zum Beispiel können wir eine benutzerdefinierte Eigenschaft für eine Farbe definieren und sie in einem border, linear-gradient, background-color, box-shadow usw. verwenden. Dies erspart es uns, all diese Eigenschaften beim Hover zurückzusetzen.

Hier ist ein komplexeres Beispiel:

.container {
  --c:red;
  width:400px;
  display:flex;
  border:1px solid var(--c);
  justify-content:space-between;
  padding:5px;
  background:linear-gradient(var(--c),var(--c)) 0 50%/100% 3px no-repeat;
}
.box {
  width:30%;
  background:var(--c);
  box-shadow:0px 0px 5px var(--c);
  position:relative;
}
.box:before {
  content:"A";
  display:block;
  width:15px;
  margin:0 auto;
  height:100%;
  color:var(--c);
  background:#fff;
}

/*Hover*/
.container:hover {
  --c:blue;
}

Wie wir oben sehen können, benötigen wir nur eine CSS-Deklaration, um viele Eigenschaften verschiedener Elemente zu ändern.