用于在表格中重叠<divs>的javascript代码</divs>

Question

我有一个包含2行3列的表格;在每个单元格中都有一个div。 我想要的是什么：

1. 当鼠标超过一个div（比如div1）时，我想增加它的高度和宽度（这已经完成）
2. divs邻居应保持静止：不改变左，上，右，下位置。
3. div1与其邻居重叠

可以这样做吗？ 谢谢。

Answer 1

这可以仅使用css完成。 http://jsfiddle.net/Erp2B/

td { 
  position:relative;
  height:100px; 
  width:100px; 
  padding:5px; 
  background:#eee; 
  border:1px solid 
  #888;
}

td div { 
  position:absolute; 
  height:100px; 
  width:100px; 
  padding:5px; 
  top:0; 
  left:0;   
  transition: all 0.5s ease;
 }

td:hover div { 
  height:200px; 
  background:#f33; 
  z-index:1000; 
}

Answer 2

如果您希望它只是重叠，那么您可以将div设置为position：absolute。如果你想让它重叠到左/右/上/下，那么当你将鼠标悬停在它上面并增加它的宽度/高度时，你会想给它一个负余量。