Ändern Sie übergeordnete div in einen anderen Hintergrund, wenn Sie über einzelne untergeordnete divs schweben

Question

Ich sehe die Lösungen, um dies mit nur einem gewünschten Hover-Effekt zu erreichen, aber ich möchte vier untergeordnete divs haben, die jeweils die wichtigsten Eltern Div ändern Hintergrund zu einem separaten Bild.

Ich gehe davon aus, dass dies mit CSS nicht möglich ist.

<div id="buttonBox"> 
    <div id="schedBox"> 
    <a href="#">Schedule</a> 
    </div> 
    <div id="transBox"> 
    <a href="#">Transformation</a> 
    </div> 
    <div id="destBox"> 
    <a href="#">Destination</a> 
    </div> 
    <div id="inspirBox"> 
    <a href="#">Inspiration</a> 
    </div> 
</div> 

Alternativ könnte ich die Kinder divs jeweils einen anderen Hintergrund haben. Das Schweben eines Kind-Divs würde alle Child-Div-Hintergründe in eine separate Farbe ändern, aber ich konnte nicht herausfinden, wie man einen Hover auf dem 2. Div auf das vorherige Div. Auswirken kann, nur nachfolgende Geschwister.

Answer 1

Leider gibt es keine Elternselektoren in CSS.

Sie müssten Javascript verwenden, um zu erreichen, was Sie tun möchten.

Answer 2

Während der eigentliche Elternselektor nicht über CSS möglich ist, können Sie ihn mit zusätzlichen Elementen und Positionierung für Ihren Fall "hacken".

Was Sie brauchen, ist den Hintergrund zu ändern, basierend darauf, welches Element schwebt - ok! Lassen Sie uns Pseudo-Elemente hinzuzufügen (oder normale Elemente, wenn Sie IE Unterstützung benötigen) und positionieren Sie sie über die Eltern mit absoluten Positionierung und positive z-index:

#buttonBox { 
    position: relative; 
    z-index: 1; 
} 

#buttonBox > div:before { 
    content: ""; 

    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    z-index: -1; 
} 

Diese positionierte Elemente negativ z-index haben sollte, so würden sie platziert werden unter allen anderen Inhalten, aber über dem Hintergrund des Elternelements.

Auf diese Weise können Regeln wie

#schedBox:hover:before { background: lime; } 
#transBox:hover:before { background: red; } 
#destBox:hover:before { background: orange; } 
#inspirBox:hover:before { background: yellow; } 

Und die pseudo-Hintergrund des übergeordneten auf schweben würde sich ändern, hinzufügen könnte!

Das einzige, was zu wissen ist, dass es keine Elemente mit nicht-statischen Position zwischen dem Eltern und den Elementen mit der Hintergrundrolle geben sollte.

Here is the live example at dabblet

Answer 3

Ja, ist es möglich. Versuchen Sie folgendes:

#schedBox:hover, #buttonBox{ 
    background: red; 
} 

#schedBox:hover{ 
    background: green; 
}