显示div相对于它的父级顶部位置

Question

我有几个div，它们具有绝对定位的侧边栏，当它们悬停时显示在它们的右侧。 我希望每个侧边栏在悬停时从顶部显示100px的父级顶部位置。

HTML

<div class="guide-container">
   THIS IS THE PARENT DIV
 <aside class="guide-extras">
   THIS IS THE SIDEBAR
 </aside>
</div>

Jquery的

  $( ".guide-container" ).hover(function() {
          var container = $( this ).find("aside").toggle();
          var height =  $( this ).find("aside").position().top
          $( this ).find("aside").css("top", height);
    });

Answer 1

尝试简单地将margin-top: 100px;添加到.guide-extras CSS类。

Answer 2

您只能使用CSS执行此操作：

＆＃13;

＆＃13;

true

＆＃13;

.guide-extras {
  float: right;
  display: none;
}

.guide-container:hover > .guide-extras {
  display: block;
  position: relative;
  top: 100px;
}

＆＃13;

＆＃13;

＆＃13;

JSFiddle

Answer 3

为何选择JavaScript？你可以使用普通的CSS：

＆＃13;

＆＃13;

.guide-container {
  position: relative;
  border: 1px solid #f00;
  margin: 10px 0;
  height: 70px;
  width: 50%;
}

.guide-extras {
  position: absolute;
  top: 20px;
  right: -210px;
  width: 200px;
  border: 1px dashed #00f;
  display: none;
}

.guide-container:hover .guide-extras {
  display: block;
}

＆＃13;

<div class="guide-container">
   THIS IS THE PARENT DIV
   <aside class="guide-extras">
     THIS IS THE SIDEBAR
   </aside>
</div>
<div class="guide-container">
   THIS IS THE PARENT DIV
   <aside class="guide-extras">
     THIS IS THE SIDEBAR
   </aside>
</div>

＆＃13;

＆＃13;

＆＃13;