如何通过css悬停操纵不同的元素

Question

我想操纵一个元素＆＃39;通过悬停宽度并同时编辑其邻居元素宽度。

我以为我可以这样做：

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

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

而.sw_technik的悬停使其宽度达到60％，而.sw_2-emotionen达到40％。但这似乎不起作用。

我真的需要使用JS吗？

其他信息：

2个容器彼此相邻，如此

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

因此我也尝试了这段代码：

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

但这也不起作用。

Answer 1

正确答案已经在similar question中得到了答案：

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

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

Answer 2

你可以使用〜或+。区别在于+要求元素直接在被徘徊的元素之后，并且〜寻找最接近的元素。

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

这是JSFiddle：https://jsfiddle.net/ka1yxv8z/

Answer 3

在回复您的评论时，这似乎对我有用，如下所示。

.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>