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>

Answer 1

我认为因为这两个图像具有绝对位置，所以div.fadehover无法获得高度。因此，将height: 700px;添加到css中的div.fadehover类似乎可以解决问题。（无论如何，从我的观点来看:)。

图像是从容器中掉出来的，CSS问题？

1 个答案: