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


       });

当我悬停包装器时，div标签内容未显示

我想制作像enter link description here

这样的功能

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

请帮助

Answer 1

我相信设置正确的位置和z-index可以做到。

例如尝试设置

.wrappercontent
{
  position: absolute;
  width:240px;
  height:70px;    
  z-index: 9001;
  display: none;
}

Answer 2

$(document).ready(function(){

            $(".wrappercontent").hide();

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

    });

除去

.wrappercontent
    {
         display: none;
    }

Answer 3

这将是sony ericson网站的一个非常基本的模仿;

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

如何使一个div漂浮在其他div上

3 个答案: