如何使一個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(); 


     }); 

當我的包裝的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(); 
    }); 
}); 

Answer 2

我相信，制定正確的位置和z指數可以做到這一點的鏈接。

例如嘗試設置

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

Answer 3

$(document).ready(function(){ 

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

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

    }); 

刪除

.wrappercontent 
    { 
     display: none; 
    }