jQuery悬停仅适用于第二个悬停

Question

我是jQuery的新手，我的.hover函数存在问题。当我第一次将鼠标悬停在图像上时，动画确实有效，但是当我再次将鼠标悬停在它上面时，它可以正常工作。谢谢你的帮助。你可以在zacknoblauch.com查看一个实例。这是我的代码：

HTML：

<div class="home_post_box">


    <?php } ?>


        <?php the_post_thumbnail('home-image'); ?>

            <div class="home_post_text">

                <a href="<?php the_permalink(); ?>"><h3><?php the_title(); ?></h3></a>

                <a href="<?php the_permalink(); ?>"><p class="home_post_text_back">check it out >></p></a>

            </div><!--//home_post_text-->

    </div><!--//home_post_box-->

CSS：

.home_post_text {
background-color: #50D07D;
width: 320px;
height: 200px;
padding: 0;
position: absolute;
bottom: 0;
left: 0;
color: #fff;
z-index: 10;
visibility: hidden;
text-decoration: none;

}

.home_post_box {
max-width: 320px;
max-height: 200px;
width: 320px;
height: 200px;
margin: 5px;
float: left;
position: relative;
overflow: hidden;

}

jQuery的：

 $(function(){
        $(".home_post_box").hover(function(){
            $(".home_post_text", this).stop().animate({top:"0px"},{queue:false,duration:1000});
    },

        function() {
            $(".home_post_text", this).stop().animate({top:"200px"},{queue:false,duration:1000});
        });
    });

Answer 1

摆脱visibility: hidden;并将top: 200px;添加到.home_post_text。

.home_post_text {
background-color: #50D07D;
width: 320px;
height: 200px;
padding: 0;
position: absolute;
bottom: 0;
left: 0;
color: #fff;
z-index: 10;
text-decoration: none;    
//visibility: hidden;
top: 200px; }

试一试：http://jsfiddle.net/viktorb/f24pZ/

Answer 2

最接近Div选择

closest( selector  )
    .closest( selector )
    .closest( selector [, context] )
    .closest( jQuery object )
    .closest( element )
closest( selectors [ , context ]  )

.closest（selectors [，context]）

。

$（本）.closest（ “div.first-DIV”）找到（ “div.inside-DIV”）;