ホバーキャプションをマウス上に表示し、上下にスライドさせるにはどうすればよいですか？

マウスオーバー/ホバーでキャプション（透明度w /テキスト）を表示したり、上にスライドさせたりして、マウスがホバリングしなくなったときに戻ることができます。私は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>

出典

2012-02-19 user1218610

コードのこの作品は、いくつかのエラーを持っている:)ありがとう、あなたは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-19 00:43:44 elclanrs

ありがとうございました:) – user1218610

ホバーキャプションをマウス上に表示し、上下にスライドさせるにはどうすればよいですか？

答えて

関連する問題