一、效果
默认如下图,五个子元素平分容器宽度。
鼠标移入任意一个子元素,宽度变大,剩下子元素等分容器剩下宽度
二、思路
默认情况:五个子元素,display:inline-block。宽度为容器的20%,高度为容器高度。
效果情况:hover容器的时候每一个子元素宽度都变为10%;
hover子元素的时候,当前子元素宽度变为60%;
为了实现过渡的效果,会给容器子级一个过渡时间,
注意:当鼠标快速移动,容器最右边会有空白区出现。这是因为有时间过渡,子级没来得及达到最大的宽度。
解决办法:容器display:table;子级display:table-cell;
标题部分(span):相对于子级定位(div1-5)
body 代码: