Image is falling out of container, CSS issue?_问答_开发者

Image is falling out of container, CSS issue?

开发者 https://www.devze.com 2023-04-13 04:44 出处：网络

I\'m stuck on this pretty simple problem and I know there must be a simple solution but I don\'t know what to do. I\'m sure it is a CSS issue since everything else is functioning fine. Here is the pag

相关专题：css wordpress

I'm stuck on this pretty simple problem and I know there must be a simple solution but I don't know what to do. I'm sure it is a CSS issue since everything else is functioning fine. Here is the page in question-

And the code used for the page

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; chars开发者_StackOverflowet=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>

I think because the two images have absolute positions the div.fadehover is failing to get a height. So adding height: 700px; to the div.fadehover class in the css seems to fix the problem. (From my point of view anyway :)