如何讓我的懸停標題僅在鼠標懸停並向上/向下滑動時出現？

目標是通過滑動鼠標懸停/懸停在圖像上方顯示標題（透明度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 2012-02-20 20:06:45

如何讓我的懸停標題僅在鼠標懸停並向上/向下滑動時出現？

回答

相關問題