How to manipulate a different element by css hover

Question

I'd like to manipulate an elements' width by hovering and at the same time edit its neighbors elements width.

I thought I could do it like so:

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

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

Whereas the hovering of .sw_technik makes its width to 60% and .sw_2-emotionen to 40%. But that doesn't seem to work.

Do I really need to use JS for something like that?

Additional info:

the 2 containers are next to each others, like so

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

And I therefore also tried this code:

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

but that doesn't work neither.

Possible duplicate of [How to affect other elements when a div is hovered](http://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-a-div-is-hovered) — Luke Clynes, Feb 16 '17 at 17:22
Could be indeed. Though after this explaination: .sw_2-technik:hover + .emotionen{ width:40%; } would be the correct answer. But that doesn't work for me neither — Daiaiai, Feb 16 '17 at 17:30
Might just by mistake here, but with your classes shouldn't it be `.sw_2-technik:hover + .sw_2-emotionen{ width:40%; }` — Callum, Feb 16 '17 at 17:32
My fault with wrong spelling. Thanks for guiding me to the right reference. — Daiaiai, Feb 16 '17 at 17:32

score 1 · Answer 1 · edited May 23 '17 at 11:53

1

The correct answer is as already answered in a similar question that one:

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

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

edited May 23 '17 at 11:53

Community

answered Feb 16 '17 at 17:33

Daiaiai

score 1 · Accepted Answer · answered Feb 17 '17 at 07:51

1

You can use ~ or +. Difference being is that + requires the element to be directly after the one being hovered, and ~ looks for the closest.

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

answered Feb 17 '17 at 07:51

Melvin Koopmans

score 0 · Answer 3 · answered Feb 16 '17 at 17:33

In reply to your comment, this seems to work for me as indicated below.

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

3 Answers3