javascript - wrong offset in relative position -

javascript - wrong offset in relative position -

i have markup.

<div class="row"> <div class="col-md-4"> <img src="imgsrc.jpg" /> </div> </div> <div class="row"> <div class="col-md-4"> <img src="imgsrc.jpg" /> </div> </div>

with .col-md-4 has relative position, when seek attach mouseover event .col-md-4 , position of offset it's homecoming wrong offset sec .col-md-4 in sec row. here script

$('.col-md-4').hover(function(){ var offset = $(this).position(); var height = $(this).height(); console.log(offset); // gives wrong offset when hovering on sec col-md-4 in sec row $('#shadow2').stop(true, true).animate({ 'left': offset.left, 'top': offset.top + height + 10 }); }, function(){ $('#shadow2').animate({ 'left': '-350px' }); });

try using .offset(), gives position of element relative document, change

var offset = $(this).position();

to

var offset = $(this).offset();

update::

$('.col-md-4').hover(function(){ var childposition = $(this).offset(); var parentposition = $(this).parent().offset(); var actualoffset = { top: childposition.top - parentposition.top, left: childposition.left - parentposition.left } var height = $(this).height(); console.log(offset); $('#shadow2').stop(true, true).animate({ 'left': actualoffset.left, 'top': actualoffset.top + height + 10 }); ....

javascript jquery css