jquery - 如何让一个div浮在另一个之上

Question

   <div>
   <a href="">
    <img src="images/fifa.jpg" /></a>

    </div>
 <div class="wrapper">

   <h4>Like Football</h4>
    <p class="wrappercontent">
   <span>Download FIFA 12 on Xperia™!</span>
    <a href="" onclick=""><span>Find more</span></a>
   </p>

   </div>

CSS

   .wrapper
    {
        background-color:Black;
        color:White;
        width:240px;
        height:70px;
         margin-top:-50px;
         position:absolute;

    }
    .wrappercontent
    {
         display: none;
    }

jquery

     $(document).ready(function () {


       $(".wrapper").hover(function () {
        $(".wrappercontent").show();


       });

当我将鼠标悬停在 wrapper div p 标签内容时不显示

我想实现类似 enter link description here 的功能

当我们像足球一样悬停在链接上时，div 会展开

请帮忙

Answer 1

这将是索尼爱立信网站的一个非常基本的模仿；

<div id="big_image">
  <img src="..." />
  <div id="floats_holder">
    <div class="float_over">
      Americas, etc
      <div class="hidden_for_hover">
        some countries
      </div>
    </div>
    <div class="float_over">
      Asias, etc
      <div class="hidden_for_hover">
        more countries
      </div>
    </div>
  </div>
</div>

和CSS

#big_image { position:relative; } /* so we can use absolute on inner contents */
#floats_holder { position:absolute; top:100px; left:0; width:100%; }
.float_over { float:left; margin-left:20px; }
.float_over .hidden_for_hover { display:none; position:absolute; bottom:0; }

和 jquery

$(document).ready(function () {
  $(".float_over").hover(function () {
    $(this).find('.hidden_for_hover').slideDown();
  }, function(){
    $(this).find('.hidden_for_hover').slideUp();
  });
});