悬停时div宽度增加（不替换嵌入式div）

Question

Here is the link to my page mintrain.co.uk/indexsp

So, for the front-page I have made the four categories have width 25%. On top of this, I've made the width double to 50% on hover. Upon hovering, the div on the far right is pushed below the others. How, using css, can I prevent this? I had the idea of making the non-hovered div width decrease (to 16%) but i do not know how to achieve this. Any help would be great.

Answer 1

I'd recommend using flexbox . Just add display: flex to container and flex: 1 to childs to make layout you want. Then add bigger flex value to :hover . Like this:

 .container { display: flex; } .link { flex: 1; /* For demo only */ border: 1px solid #000; height: 40px; transition: 1s all; } .link:hover { flex: 1.5; /* Or any other value */ } 

 <div class="container"> <div class="link"></div> <div class="link"></div> <div class="link"></div> <div class="link"></div> </div> 

For your site, just replace .container with .boxes and .link with #box (which isn't valid HTML on your site, having multiple same IDs)