CODEWITHSUNDEEP
javascriptjquery
Laurence Fass
Laurence Fass

Reputation: 1942

jquery offset incrementing previous value on .hide()

setting position with jquery.offset() is not behaving as i expect. my example code attempts to overlay a div (.slide) with another (.active) div on hover. i understand offset({top,left}} to set the position of an element to {top, left} but it is incrementing the position by this amount each time.

as an exercise - if i set the active block to display:block and remove the active.hide() statement the positioning works as i expect. the .hide() appears to be causing an offset accumulation. im very grateful for any guidance.

http://jsfiddle.net/laurencefass/q815mqkm/

$(".slide").mouseenter(function (e) {
    $(this).css("background-color", "red");
    offset = $(this).offset();
}

more code follow link...

Upvotes: 0

Views: 577

Answers (2)

Amit.S
Amit.S

Reputation: 441

See this fiddle just edited your code any the overlay div will be on top of the hovered div. I assume that what you wanted. see this updated fiddle. In your code you was setting the top:1 and left:1 which is not true for all the div's as they all are at different positions and you need to use their offsets instead of using 1 and 1 every time and with setting the offset is defined as the setting the coordinates(position) of the element so to make it work element should be made visible at the first instance to set its coordinates

 active.show(); //show the div first and then set the offset
 active.offset({
    top:  offset.top,
    left: offset.left
});

Upvotes: 1

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167212

Why not just use:

position: relative;
top: 1px;
left: 1px;

Something like this is what you are expecting right?

ul {margin: 0; padding: 0; list-style: none;}
ul li {
  width:19%;
  margin-left:1%;
  min-height: 100px;
  float:left;
  background-color:orange;
  border:5px solid gray;
  box-sizing: border-box;
}
ul li:hover {
  position: relative;
  top: 2px;
  left: 2px;
  background-color:blue;
  border:5px solid gray;
}
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Upvotes: 0

Related Questions