Question

当我将鼠标悬停在LI上时，我正在尝试更改div位置（顶部，左侧）。这是我正在使用的，似乎设置位置：相对但它不会添加或更改顶部或左侧元素。

它从这个html获取XX和YY值：

<li value="9" xx="10" yy="10"><a href="#">Content Here</a></li>


$(function(){
    $("div.listcol ul li").bind("mouseover",function(){
        $("div.cutaway-text").hide();    
        $("div.cutaway-image img").hide();
        $("div.cutaway-image img#img"+this.value).show();
        var top2 = 0;
        var left2 = 0;

        top2 = $(this).attr('xx');
        left2 = $(this).attr('yy');

        $(".highlighter").css('position', 'relative');
        $(".highlighter").css('top', top2); 
        $(".highlighter").css('left', left2); 

        //var d = document.getElementById('highlighter');
        //d.style.position = "absolute";
        //d.style.left = left;
        //d.style.top = top;

        //document.getElementById("div.highlighter").style.left = left2;
        //document.getElementById("div.highlighter").style.top = top2;
        //console.log(this.value);
    });
});

注释掉的线条是我已经尝试/玩过的，谢谢。

编辑：这是jsfiddle http://jsfiddle.net/SWXgb/

Answer 1

您需要在top和left值中添加“px”，如下所示：

$('.highlighter').css({  top : top2 + 'px', left : left2 + 'px' });

请参阅working demo。

Answer 2

看看这个修改过的小提琴：http://jsfiddle.net/SWXgb/6/

我注意到的事情：

您的第一个<li>标记没有xx属性，而是top。
您尚未指定“px”或“em”值来限定JavaScript中的top和left值。
子div（类荧光笔）设置为position: relative，如果您希望将其定位为父div，则需要position: relative在翻转图像和孩子的position: absolute上。

Answer 3

好的，我有个主意。

CSS：如果位置是“绝对的”，顶部，左侧，右侧和底部都正常工作...... 当头寸相对时，使用margin-top，margin-left，margin-right和margin-bottom。

或者，让父容器定位相对，使绝对位置从第一个亲父开始;）

动态更改相对左上角的div位置

3 个答案: