0

ここではすべてが正常に機能しています。唯一の問題は、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;
  }
4

2 に答える 2

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

働くフィドル

于 2013-01-29T04:08:08.577 に答える
0

=> 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;
}
于 2013-01-29T03:37:10.523 に答える