Question

因为我正试图用我的游戏缩略图实现jQuery Mouse over效果的滑动框和字幕。每当我鼠标悬停在缩略图上时，标题就会出现，当我取下鼠标指针时，标题会消失。我已经实现了它，但问题很小。

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>

Answer 1

在您的代码中，我编辑了一些内容 -

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

这是一个活泼的小提琴 -

Live example

Jquery滑动框与鼠标问题

1 个答案: