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( 选择器 [, context] )

$(this).closest("div.first-div").find("div.inside-div");