0

当我尝试使用 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>
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 回答