javascript - jqueryでdivを別のDOM要素にドッキングする

Question

私の体には次のようなイメージがあります。

<div id="wrapper">
    <img id="one" src="img1.png" />
</div>

ホバリングすると、divが追加されます：

function bindHover() {
    $("#one").hover(
            function() {
                $('#wrapper').append('<div id="hoverdiv"></div>');
            }
    )
}

私がやりたいことは、追加された div の#hoverdiv位置が img のすぐ下にあること#oneです。この写真のように！私をクリックして例の画像

重要な注意点の 1 つは、 の位置が#one常に同じであるとは限らないということです。

Answer 1

function bindHover() {
  $("#one").hover(
   function() {

         var Position = $("#one").position();

         $('#wrapper').append('<div id="hoverdiv"></div>');

         $('#hoverdiv').css({'position': 'absolute',
                            'left': Position.left, 
                            'top': Position.top + $("#one").height()});

      }
   )}

Answer 2

 $("#one").hover(
    function() {
        width=$(this).width();
      $('#wrapper').append('<div id="hovering" style="width:'+width+'px"></div>');
    },function() {
      $('#hovering').remove();
 });

フィドル: http://jsfiddle.net/ZhbdW/3/