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 — Luke Clynes
– Luke Clynes, Commented Feb 16, 2017 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
– Daiaiai, Commented Feb 16, 2017 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
– Callum, Commented Feb 16, 2017 at 17:32
My fault with wrong spelling. Thanks for guiding me to the right reference. — Daiaiai
– Daiaiai, Commented Feb 16, 2017 at 17:32

Melvin Koopmans · Accepted Answer · 2017-02-17 07:51:17Z

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;
}

Here is the JSFiddle: https://jsfiddle.net/ka1yxv8z/

answered Feb 17, 2017 at 7:51

Melvin Koopmans

3,0703 gold badges27 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 11:53:23Z

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, 2017 at 11:53

CommunityBot

11 silver badge

answered Feb 16, 2017 at 17:33

Daiaiai

1,1093 gold badges13 silver badges33 bronze badges

Comments

Luke Clynes · Accepted Answer · 2017-02-16 17:33:59Z

0

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>

answered Feb 16, 2017 at 17:33

Luke Clynes

1951 silver badge10 bronze badges

Collectives™ on Stack Overflow

How to manipulate a different element by css hover

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related