圖像是從容器，CSS問題？

我被困在這個非常簡單的問題，我知道必須有一個簡單的解決方案，但我不知道該怎麼做。我確定這是一個CSS問題，因爲其他一切都運行正常。這裏是question-圖像是從容器，CSS問題？

頁和用於網頁的代碼

CSS：

div.fadehover { 
    position: relative; 
} 


img.a { 
    position: absolute; 
    left: 0; 
    top: 0; 
    z - index: 10; 
} 

img.b { 
    position: absolute; 
    left: 0; 
    top: 0; 
}

HTML/JS：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
     <title> 
      jQuery Hover Effect 
     </title> 
     <script type='text/javascript' src='jquery.js'> 
     </script> 
     <script type='text/javascript'> 
      jQuery(document).ready(function() { 
       jQuery("img.a").hover(

       function() { 
        jQuery(this).stop().animate({ 
         "opacity": "0" 
        }, "slow"); 
       }, function() { 
        jQuery(this).stop().animate({ 
         "opacity": "1" 
        }, "slow"); 
       }); 
      }); 
     </script> 
     <link rel="stylesheet" type="text/css" href="/js/mouseover.css" /> 
    </head> 

    <body> 
     <div class="fadehover"> 
      <img src="pre.jpg" alt="" class="a" /> 
      <img src="post.jpg" alt="" class="b" /> 
     </div> 
    </body> 

</html>

來源

2011-10-16 user998266

引用自己的另一個評論：'是你的標籤鍵被打破嗎？' – Bojangles

什麼問題？該頁面的行爲應該如此......絕對定位的元素不包含在容器大小計算中。 –

@JamWaffles - 相反，那些*是*選項卡。 –

我想是因爲兩個圖像具有絕對定位div.fadehover未能獲得高度。因此，在css的div.fadehover類中添加height: 700px;似乎解決了這個問題。（無論如何，從我的角度來看:)

來源

2011-10-16 22:03:27 Steve

修好了！我無法相信我正在爲此而苦苦掙扎。謝謝。 – user998266

圖像是從容器，CSS問題？

回答

相關問題