0

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

它从此 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/

4

3 回答 3

2

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

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

请参阅工作演示。

于 2012-12-19T16:40:28.487 回答
1

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

我注意到的事情：

  • 您的第一个<li>标签没有xx属性，而是有top。
  • 您没有指定 'px' 或 'em' 值来限定 JavaScript 中的topandleft值。
  • 子 div（带有类highlighter）设置为position: relative，如果您希望它相对于父 div 定位，则需要position: relative在rollover-image和position: absolute子上。
于 2012-12-19T16:45:16.097 回答
0

好的，我有个主意。

CSS：top、left、right 和 bottom 都可以正常工作，如果 position 是'absolute'...当 position 是相对位置时，使用 margin-top、margin-left、margin-right 和 margin-bottom。

或者，使父容器相对定位，以使绝对位置从第一个相对父级开始；）

于 2012-12-19T16:37:51.670 回答