jquery - 如何在链接下方显示div

Question

这里一切正常，唯一的问题是 new_r_div 没有显示在

 <a href="#">Response Request</a>'

如何做到这一点。

可以看到代码here

HTML:

 <div id="response"> I found this to be a very nice solution. If you had floating children and non floating children, the height will automatically be adjusted to the min amount of space needed. The width is set to 100% to expand to the
this is a
   <a href="#">Response Request</a>
   <div class="new_r_div">
   <ul>
      <li><a href="#" class="link" >Confirm</a></li>
      <li><a href="#" class="link" >Delete</a></li>
   </ul>
 </div>
</div>

CSS:

 .new_r_div{
   position:absolute;
   width:100px;
   height:40px;
   background:#ccc;
    overflow: hidden;
   border: solid 2px #ccc;
 background: #99CCFF;
  z-index: 9999;
   -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
 visibility: hidden;
}

#response:hover .new_r_div
 {
   visibility: visible;
}
   .new_r_div li:hover{
      background:red;
  }

Answer 1

这可以使用 jQuery 来完成。只需将以下 jQuery 添加到您的代码中即可。

$(function(){ setDiv(); });  //Executes on refresh
$(window).resize(function () { setDiv();});  //Executes on page resize

function setDiv(){
    var aLeft = $('#response>a').offset().left;
    $('.new_r_div').css({'left' : aLeft});
}

Working Fiddle