Question

我有一个滑动的boxcaption，它工作正常。但是，当你第一次看到它上面有框标题然后当你鼠标悬停它时，它正常工作，但它开始时顶部有标题。我希望盒子标题只显示用户将鼠标悬停在盒子上。我无法弄清楚为什么会这样做。这有点奇怪。

在这里看一下，这样你就可以看到我在说什么。

http://ironbulldog.com/windows/test.html

以下是我的源代码。

    <!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>Testing</title>
<style type="text/css">

    *{ padding:0px; margin:0px; }
    body{ background:#D5DEE7; }
    a{ color:#C8DCE5; }
    h3{ margin: 190px 10px 0 10px; color:#FFF; font:18pt Arial, sans-serif; letter-spacing:-1px; font-weight: bold;  }

    .boxgrid{ 
        width: 325px; 
        height: 260px; 
        margin:10px; 
        float:left; 
        background:#161613; 
        border: solid 2px #8399AF; 
        overflow: hidden; 
        position: relative; 
    }
        .boxgrid img{ 
            position: absolute; 
            top: 0; 
            left: 0; 
            border: 0; 
        }
        .boxgrid p{ 
            padding: 0px 10px; 
            color:#afafaf; 
            font-weight:bold; 
            font:10pt "Lucida Grande", Arial, sans-serif; 
        }

    .boxcaption{ 
        float: left; 
        position: absolute; 
        background: #000; 
        height: 260px; 
        width: 100%; 
        opacity: .8; 
        /* For IE 5-7 */
        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
        /* For IE 8 */
        -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    }

</style>

<script type="text/javascript" src="http://www.microsoft.com/library/shared/jquery/jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        //To switch directions up/down and left/right just place a "-" in front of the top/left attribute
        //Vertical Sliding
        $('.boxgrid.slidedown').hover(function(){
            $(".cover", this).stop().animate({top:'0px'},{queue:false,duration:300});
        }, function() {
            $(".cover", this).stop().animate({top:'260px'},{queue:false,duration:300});
        });

        //Header Text Comes in Later
        $('.boxgrid.slidedown').hover(function(){
            $(".delay", this).stop().animate({top:'0px'},{queue:false,duration:500});
        }, function() {
            $(".delay", this).stop().animate({top:'260px'},{queue:false,duration:500});
        });
    });
</script>

</head>

<body>        
    <div class="boxgrid slidedown">
        <img src="jareck.jpg"/>
        <div class="cover boxcaption">
            <div class="delay boxcaption">
            <h3>The Nonsense Society</h3>
            </div>
    </div>
    </div>

</body>
</html>

Answer 1

将此行添加到您的css

.boxcaption.cover   { top: 260px; }

Answer 2

只需将top:260px添加到您的css中的.boxcaption

带标题的滑动框

2 个答案: