图像是从容器，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问题？

回答

相关问题