javascript - 带字幕的滑盖盒 | 带字幕的滑盖盒

我有一个滑动框标题，它可以正常工作。但是，当您第一次查看时，它上面有一个方框标题，然后当您将鼠标悬停在上面时，它可以正常工作，但是它的开头是标题。我希望仅当用户将鼠标悬停在框上时才显示框标题。我不知道为什么这样做。有点奇怪

在这里查看一下，这样您就可以了解我在说什么。

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>

最佳答案

将此行添加到您的CSS

.boxcaption.cover   { top: 260px; }

关于javascript - 带字幕的滑盖盒，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/3884099/