1

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});
        });
    });
4

2 に答える 2

0

削除して.home_post_textvisibility: hidden;に追加top: 200px;します。

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

于 2012-11-19T01:03:53.633 に答える
-1

Divの選択に最も近いものを使用

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

.closest（セレクター[、コンテキスト]）

$（this）.closest（ "div.first-div"）。find（ "div.inside-div"）;

于 2012-11-18T21:36:28.780 に答える