Как сделать так, чтобы моя подпись при наведении курсора отображалась только при наведении курсора мыши и скольжении вверх / вниз? - PullRequest
Новая
       25

Как сделать так, чтобы моя подпись при наведении курсора отображалась только при наведении курсора мыши и скольжении вверх / вниз?

0 голосов
/ 19 февраля 2012

Цель состоит в том, чтобы заголовок (прозрачность с текстом) появлялся (над изображением) при наведении курсора мыши при наведении курсора вверх и исчезал, когда мышь больше не зависает, при перемещении назад вниз.Я новичок в 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>

1 Ответ

0 голосов
/ 19 февраля 2012

Этот фрагмент кода содержит некоторые ошибки, и вы можете использовать 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'); });
...