Question

我有这个标记。

<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>

.col-md-4具有相对位置，当我尝试将鼠标悬停事件附加到.col-md-4并获取其偏移位置时，它会返回第二行中第二个.col-md-4的错误偏移量。这是脚本

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

Answer 1

尝试使用.offset()，它给出了元素相对于文档的位置，更改

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

到

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

<强>更新::

$('.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
    });
....

相对位置的错误偏移

1 个答案: