选择上一个元素并使用CSS应用效果

Question

I have 3 <div> s in one horizontal line. each width = 33.33% and I want to change width of one div on hover to 50% and other two to 25%.

<div id="A"></div>
<div id="B"></div>
<div id="C"></div>

I can apply this for A as

#A:hover{width:50%}
#A:hover+#B
{width:25%}
#A:hover~#C
{width:25%}

and it work fine.

when we hover B

#B:hover{width:50%}
#B:hover+#A
{width:25%}
#B:hover~#C
{width:25%}

B expand to 50% and C shrink to 25%. but #A remain 33.33%.

How can I fix this.

Answer 1

In Css there is no previous selectors

• by default the width is 33.33%
• on hover of the parent the width is changed to 25%
• on hover of the div inside the width is changed to 50%

 * { box-sizing: border-box; } .par { overflow: hidden; /* to clear floats */ } .par div { width: 33.33%; /* default width */ transition: .2s linear; border: 1px solid red; height: 100px; float: left; } .par:hover div { width: 25%; /* width when you hover on parent */ } .par div:hover { width: 50% /* width when you hover on the element */ } 

 <div class="par"> <div id="A">1</div> <div id="B">2</div> <div id="C">3</div> </div> 

Answer 2

Flexbox can do that without a parent selctor:

 * { box-sizing: border-box; } .parent { width: 80%; margin: 1em auto; display: flex; } .child { height: 150px; border: 1px solid grey; flex: 1; transition: flex 1s ease; } .child:hover { flex: 0 0 50%; } 

 <div class="parent"> <div class="child"></div> <div class="child"></div> <div class="child"></div> </div>