Wie man ein anderes Element durch CSS Hover manipulieren

Question

Ich möchte die Breite eines Elements durch Schweben bearbeiten und gleichzeitig die Breite seiner Nachbarn Elemente bearbeiten.

Ich dachte, ich es wie so tun konnte:

.sw_2-technik:hover{ 
    width:60%; 
} 

.sw_2-technik:hover .sw_2.emotionen{ 
    width:40%; 
} 

Während das Schweben von .sw_technik macht seine Breite auf 60% und .sw_2-emotionen bis 40%. Aber das scheint nicht zu funktionieren.

Muss ich wirklich JS für so etwas verwenden?

---

Zusätzliche Informationen:

die 2 Behälter jeweils anderen nächsten sind, wie so

<div class="sw_2-technik"></div><div class="sw_2-emotionen"></div> 

Und ich versuchte daher auch diesen Code:

.sw_2-technik:hover + .emotionen{ 
    width:40%; 
} 

aber das doesn arbeite auch nicht.

Answer 1

Sie können mit ~ oder +. Der Unterschied besteht darin, dass + das Element direkt hinter demjenigen benötigt, in dem es schwebt, und ~ nach dem nächsten sucht. Hier

.sw_2-technik:hover ~ .sw_2.emotionen { 
    color: blue; 
} 

ist die JSFiddle: https://jsfiddle.net/ka1yxv8z/

Answer 2

Die richtige Antwort ist wie bereits in einem similar question, dass man antwortet:

.sw_2-technik:hover{ 
    width:60%; 
} 

.sw_2-technik:hover + .sw_2-emotionen{ 
    width:40%; 
} 

Answer 3

In Antwort auf Ihren Kommentar, dies für mich zu arbeiten scheint, wie unten angegeben.

.sw_2-technik, .sw_2-emotionen { 
 
    background: blue; 
 
    padding: 2px; 
 
} 
 

 
.sw_2-technik + .sw_2-emotionen { 
 
    padding: 5px; 
 
    background: red; 
 
}

<div class="sw_2-technik"></div> 
 
<div class="sw_2-emotionen"></div>