CODEWITHSUNDEEP
javascriptcss
user3616805
user3616805

Reputation: 13

javascript code for overlaping <divs> in a table

I have a table with 2 rows and 3 columns; in each cell there is a div. What I want:

  1. when mouse is over one div (say div1), I want to encrease its height and width (this is done)
  2. the divs neighbours should remain still: no modification of left, top, right, bottom position.
  3. the div1 overlaps over its neighbours

Can this be done ? Thank you.

Upvotes: 1

Views: 57

Answers (2)

superUntitled
superUntitled

Reputation: 22567

This can be done with css only. 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; 
}

Upvotes: 1

Tim B
Tim B

Reputation: 1877

If you want it to simply overlap then you can set the div to position: absolute. If you want it to overlap to the left/right/top/bottom then you'll want to give it a negative margin when hovering over it and increasing its width / height.

Upvotes: 0

Related Questions