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下方。就像在这张照片中！ click me for example image

一个重要的注意事项是，#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()});

      }
   )}

使用jquery将div停靠到另一个DOM元素

2 个答案: