如何相对于列表项定位div？

Question

我有一张无序的图片列表，当我将鼠标悬停在一张图片上时，我希望左侧的两张图片淡出，并在它们的文本位置显示一个div。 除了定位div之外，我已经开始进行此操作-我已经尝试过：

div.position({my: 'left top', at: 'left top', of: other_list_item});

但这只会返回{left：0，top：0}的Object（新位置）。

我也尝试将div放在另一个li元素中，但这仍然是不行的。 这是div HTML：

<div style="width: 255px; height: 110px; position: absolute;" id="name_popup"><p>Jon Jensen</p><p>Chief Technical Officer</p><p>London, England</p></div>

编辑我正在处理一个JSFiddle示例，但是有很多需要添加的内容，因此在准备好时可以使用idk。 无论如何，我忘了提到这点乐趣了：

当我在要定位的元素上单独调用.position（）时，它将返回正确的偏移量，但是当我尝试在其他元素上使用position（）来匹配其位置时，则什么也没有发生。

Answer 1

我不太清楚这个问题，但是从我的推理中我知道您正在尝试将新的div替换为淡出的图像，因此这里有一些代码可以满足您的情况

$('div').click(function(){
    //get the positions of the divs to be faded out
    var prev_position = $(this).prev('div').position();
    var next_position = $(this).next('div').position();
    //create and position new divs
    $(this).insertBefore('<div style="position:absolute;top:' +prev_position.top+ 'px;left:' +prev_position.left+ 'px;">Replacing DIV</div>');
    $(this).insertAfter('<div style="position:absolute;top:' +next_position.top+ 'px;left:' +next_position.left+ 'px;">Replacing DIV</div>');
    //hide the divs
    $(this).prev('div').fadeOut();
    $(this).next('div').fadeOut();
});

有时，如果您的父元素设置了位置，则.position（）将获得相对于父元素的位置，并且根据您的需要，这可能会使您的设计失败。 因此，您可以获取相对于WINDOW的上一个和下一个div的坐标，并且可以得到如下所示的坐标：

    function getPosition($el){
        //get the offset coordinates of the recently clicked link
        var offset = $el.offset();
        var top = offset.top;
        var left = offset.left;
        //get position of this link relative to the window
        var rel_top = top - $(window).scrollTop();
        var rel_left = left - $(window).scrollLeft();
    }