相對左上角動態更改div位置

當我將鼠標懸停在LI上時，我試圖更改div位置（頂部，左側）。這是我使用的，它似乎設置的位置：相對，但它不會添加或更改頂部或左側的元素。相對左上角動態更改div位置

它從這個網站的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/

來源

2012-12-19 PeteTheGreek

提供您的html請「xx」和「yy」attr後面是什麼？ – kidwon

你檢查過top2和left2的值嗎？ –

設置之前，'top2'和'left2'裏面有什麼？ – algorhythm

你需要「像素」添加到您的top和left值是這樣的：

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

請參閱working demo。

來源

2012-12-19 16:40:28 jfrej

謝謝！小學生錯誤：/ – PeteTheGreek

OK，我有一個想法。

CSS：頂部，左側，右側和底部正在工作，如果位置是'絕對'... 當位置相對時，使用邊緣頂部，邊緣左側，邊緣右側和邊緣底部。

或者使父容器相對定位，擁有了從第一個相對父的絕對位置;）

來源

2012-12-19 16:37:51 algorhythm

在此修改小提琴看看：http://jsfiddle.net/SWXgb/6/

事情，我注意到：

你的第一個<li>標籤不具有xx屬性，它有top代替。
您尚未指定'px'或'em'值來限定JavaScript中的top和left值。
孩子的div（與類熒光筆）設置爲position: relative，如果你希望它被定位相對於父DIV，你需要position: relative的翻轉圖像，並position: absolute對孩子。

來源

2012-12-19 16:45:16

相對左上角動態更改div位置

回答

相關問題