Jquery滑動框鼠標懸停問題

因爲我試圖用jQuery鼠標實現滑動框和標題以覆蓋我的遊戲縮略圖。每當我將鼠標懸停在縮略圖上時，標題將會出現，當我摘下鼠標指針時，標題消失。我已經實施它，但遇到小問題。Jquery滑動框鼠標懸停問題

jQuery鼠標懸停的問題是當頁面首次加載時，鼠標懸停在div上，而沒有將鼠標移到它上面，我不想讓我寧願每當用戶將鼠標指針移過jQuery效果的縮略圖應該會出現。看到我的下面的代碼片段。

參考：（http://www.huzgames.com/）請參閱新遊戲部分。

代碼：

<!doctype html> 
<html> 
<head> 
<style> 
*{ padding:0px; margin:0px; } 

      a{ color:#00c415; } 
      h5{ 
          margin: 10px 10px 0 10px; 
          color:#FFF; 
          font:13pt Segoe Print; 
          letter-spacing:-1px; 
          font-weight: bold; } 

      .boxgrid{ 
       /*width: 325px; 
       height: 260px; */ 
       width: 160px; 
       height: 117px; 
       margin-top:10px; 
           margin-left: 4px; 
       float:left; 
       background:#161613; 

       overflow: hidden; 
       position: relative; 
      } 
       .boxgrid img{ 
        position: absolute; 
        top: 0; 
        left: 0; 
        border: 0; 
       } 
       .boxgrid p{ 
        padding: 0 10px; 
        color:#afafaf; 
        font-weight:bold; 
        font:10pt "Lucida Grande", Arial, sans-serif; 
       } 

      .boxcaption{ 
       float: left; 
       position: absolute; 
       background: #000; 
       height: 117px; 
       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)"; 
      } 
       .captionfull .boxcaption { 
        top: 117; 
        left: 0; 
       } 
       .caption .boxcaption { 
        top: 100; 
        left: 0; 
       } 
</style> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
    $('.boxgrid.captionfull').hover(function(){ 
    $(".cover", this).stop().animate({top:'1px'},{queue:false,duration:160}); 
    }, function() { 
    $(".cover", this).stop().animate({top:'117px'},{queue:false,duration:160}); 
}); 
}); 
</script> 
       </head> 
       <body> 
       <div class="boxgrid captionfull"> 
       <img src="path" height="117" width="160" alt="" /> 
       <div class="cover boxcaption"> 
        <h5 align="center">xxxxxxxx</h5> 
        <p align="center"><a href="#" style="text-decoration:none;font-size:16px; font-family:Wanted M54"><b>Click To Play</b></a></p> 
       </div> 
      </div> 
       </body> 
       </html>

來源

2013-03-13 phphunger

在你的代碼我編輯something-

<script type="text/javascript"> 
     $(document).ready(function(){ 
$('.cover').hide(this); 
    $('.boxgrid.captionfull').hover(function(){ 

    $(".cover", this).show().stop().animate({top:'1px'},{queue:false,duration:160}); 
    }, function() { 
    $(".cover", this).show().stop().animate({top:'117px'},{queue:false,duration:160}); 
}); 
}); 
    </script>

這裏一住就是fiddle-

Live example

來源

2013-03-13 05:38:18 Manoj

其實鼠標懸停是不是在所有現在工作。如果我添加此代碼。 mouseover div永久隱藏。 – phphunger 2013-03-13 05:45:31

@phphunger，請查找編輯後的代碼。 – Manoj 2013-03-13 05:58:37

嘿馬諾茲...感謝您的幫助..它現在工作... – phphunger 2013-03-13 06:04:39

Jquery滑動框鼠標懸停問題

回答

相關問題