拆分幻灯片兄弟，一个兄弟影响 hover 上的另一个

Question

I am trying to achieve a similar effect as the Navy.com header where you hover over one sibling and it slides to take up the majority of space while shrinking and hiding the content of the other sibling.

Because of the CSS standard of not being able to select previous siblings, I am only able to achieve the effect with one side and not the other. I understand this may not be possible with CSS alone.

Thank you in advance for your help!

Here is the code I am currently using:

 .container { display: flex; flex-direction: row-reverse; }.b1 { display: flex; order: 2; width: 50%; height: 150px; padding: 10px; background-color: rgb(40, 251, 202); transition: all 0.5s; }.b2 { display: flex; width: 50%; order: 1; height: 150px; padding: 10px; background-color: rgb(227, 29, 103); transition: all 0.5s; }.b1:hover { width: 80%; }.b2:hover { width: 80%; }.b1:hover~.b2 { background-color: rgba(227, 29, 103, 0.4); width: 20%; }.b2:hover~.b1 { background-color: rgba(40, 251, 202, 0.4); width: 20%; }.b1:hover~.b2 span { display: none; }.b2:hover~.b1 span { display: none; }

 <div class="container"> <div class="b2"> <span>This content will show up directly in its container.</span> </div> <div class="b1"> <span>This content will show up directly in its container.</span> </div> </div>

Answer 1

With a bit of restructuring, you would be able to achieve your desired effect with CSS only. In this implementation, I use the :not CSS selector, combined with some multi-level :hover selectors (which works because .container and .child take the same space)

Although, just as a suggestion: take advantage of flex's auto-grow, and remove the width: 20%; logic entirely. That way, the unhovered component's children will take equal space, and a hovered child will still grow to be 80% width. This will allow you to dynamically add more items without having to change the hardcoded CSS.

 .container { display: flex; }.child { width: 50%; height: 150px; padding: 10px; transition: all 0.5s; }.child--red { background-color: rgba(227, 29, 103, 1); }.container:hover.child--red:not(:hover) { background-color: rgba(227, 29, 103, 0.4); }.child--green { background-color: rgba(40, 251, 202, 1); }.container:hover.child--green:not(:hover) { background-color: rgba(40, 251, 202, 0.4); }.container:hover.child:not(:hover) span { display: none; }.container:hover.child { width: 20%; }.container:hover.child:hover { width: 80%; }

 <div class="container"> <div class="child child--green"> <span>This content will show up directly in its container.</span> </div> <div class="child child--red"> <span>This content will show up directly in its container.</span> </div> </div>