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

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

1 个答案: