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代わりに属性があります。
  • JavaScriptの値topと値を修飾するために「px」または「em」の値を指定していません。left
  • 子div（クラスハイライター付き）はに設定されposition: relativeました。親divに対して相対位置に配置する場合はposition: relative、rollover-imageとposition: absolute子に必要です。
于 2012-12-19T16:45:16.097 に答える
0

OK、私には考えがあります。

CSS：位置が「絶対」の場合、上、左、右、下は正常に機能しています...位置が相対的な場合は、margin-top、margin-left、margin-right、margin-bottomを使用します。

または、親コンテナを相対位置に設定し、絶対位置を最初の相対親から開始します;）

于 2012-12-19T16:37:51.670 に答える