0

ゲームのサムネイルにjQueryマウスオーバー効果を使用してスライディングボックスとキャプションを実装しようとしています。サムネイルにマウスを合わせるとキャプションが表示され、マウス ポインターを離すとキャプションが消えます。私はそれを実装しましたが、小さな問題が発生しています。

jQueryのマウスオーバーの問題は、ページが初めて読み込まれるときに、マウスオーバーのdivがマウスオーバーせずに来ることです効果が現れるはずです。以下のコードスニペットを参照してください。

参考： ( 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>
4

1 に答える 1

2

あなたのコードで私は何かを編集しました-

  <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>

これがライブフィドルです-

実際の例

于 2013-03-13T05:38:18.900 に答える