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

Question

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

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

这个怎么做。

你可以在这里看到代码

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

工作小提琴

Answer 2

我想你想要像 => jsfiddle Link这样的东西。

如图所示，您必须在 css 中进行一些更改。

.new_r_div {
    display:inline-block;   
    margin-top:20px;
    margin-left:-102px; 
    position:absolute;
    width:100px;   
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    overflow: hidden;
    border: solid 2px #ccc;
    background: #99CCFF;
    visibility: hidden;
}