大家看看这个怎么弄，设计思路是什么呢

Question

一个上下布局的div，里面有7张图片，这7张图是一个叠着一个的，但当鼠标移到某张图片上时比如这里的第4张照片把周围图片撑开不叠放，js+css该怎么写比较好呢，请大侠指教

Answer 1

1.布局绝对定位
2.当点击事件触发时，给需要运动的元素写一个计算高度的函数，比如点击4，用jQuery能够很简单获取到4后面的所有兄弟节点，然后给他们添加高度运动，当然你这图的意思是4也要运动，就重新写一个计算4的高度的方法就行了
计算高度的方法并不难，只要在不同场景下判断仔细一点，就应该没什么问题

Answer 2

直觉告诉我这题用before和after伪元素就能做，不需要js

Answer 3

我头两天刚做了一个类似的效果...

li{
  margin-top: -4px;
}

li:hover{
  margin-top: 5px;
  margin-bottom: 12px;
}

大致就是这样了 只是你要改改具体的值