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。就像这张照片一样！点击我例如图片

一个重要的注意事项是， 的位置#one并不总是相同的，这就是我要问的原因。

Answer 1

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

小提琴：http: //jsfiddle.net/ZhbdW/3/

Answer 2

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()});

      }
   )}