0

目標は、マウスオーバー/ホバー時に上にスライドしてキャプション (テキスト付きの透明度) を (画像の上に) 表示し、マウスがホバリングしなくなると下にスライドして非表示にすることです。私は JavaScript を初めて使用し、中間の HTML と CSS のスキルしか持っていません。私はたくさんの異なるスクリプトを試しましたが、これは私がそれを機能させるのに最も近いものです. 助けてください、私が間違っていることを理解していません! ありがとうございました：）

<html>
<head>
    <script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">

        $(document).ready(function(){
            // jQuery goes here. 

    $(".box").hover(function(){
        $(this).find('overlay').animate({
                    bottom: '0%'}, 'slow' );
                    },
                    function() {
                    $(this).find('overlay').animate({
                    bottom: '-100%'
                    },'slow');}
             );}

    </script>

    <style type="text/css">

        body,html{
            position: relative;
            width:100%;
            height:100%;
            margin:0 auto;
            text-align:center;
            }

        #container{
            position:relative;
            width:500px;
            margin: 0 auto;
            }

        a {
            margin: 20px;
        }

        .box{
            display:block;
            height:200px;
            width:500px;
        }

        /* box one */

        .box.one{
            background-image: url(yodawg.png);
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
            overflow: hidden;
        }

        .box.one:hover .overlay{
            position: absolute;
            bottom: -100%;
            }

        /* box two */

        .box.two{
            background: url(firstworld.png);
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
            overflow: hidden;
        }
        .box.two:hover .overlay{
            position: absolute;
            bottom: -100%;
            }

        /* box three */

        .box.three{
            background: url(philosoraptor.png);
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
            overflow: hidden;
        }

        .box.three:hover .overlay{
            position: absolute;
            bottom: -100%;
            }

        /* the overlay */

        .box .overlay{
            width: 500px;
            height: 200px;
            background-color: #000;
            opacity: .5;
            color: #FFF;
            text-align:center;
            font-family:"Arial Black", Gadget, sans-serif;
            font-size:36px;
            padding: 50px 0 0 0;
        }

    </style>
</head>

<body>

    <div id="container">

        <a class="box one"> 
            <div class="overlay">
                <p>yo dawg</p>
            </div>
        </a>
        <a class="box two">
            <div class="overlay">
                <p>first world problems</p>
            </div>
        </a>
        <a class="box three">
            <div class="overlay">
                <p>philosoraptor</p>
            </div>
        </a>

        </div>

</body>

</html>
4

1 に答える 1

0

このコードにはいくつかのエラーがあり、次を使用できますslideToggle()。

$(this).find('overlay').animate({
    bottom: '0%'}, 'slow' );
    },
    function() {
    $(this).find('overlay').animate({
    bottom: '-100%'
    },'slow');}
);} // Unexpected `;`

.

// Better
$('.box').hover(function(){ $(this).find('overlay').slideToggle('slow'); });
于 2012-02-19T00:43:44.890 に答える