0

私はワードプレスのテーマを開発しています。jQueryまたはCSSのみを使用して、ホバー時に他の投稿に影響を与えずにその投稿の要素のみをターゲットにするにはどうすればよいですか? より具体的には、ホバー時に画像の上にいくつかのボタンを表示したいのですが、明らかに他の投稿の画像には表示したくありません。

これはここでの単一の投稿であり、ループ内のコードです。ボタンは .actions div 内にあります。

<div class="post-holder">
    <div class="post-image">
        <div class="post-image-sizer">
            <?php 
            $args = array( 'post_type' => 'attachment','numberposts' => 1,'post_parent' => $post->ID );
            $images = get_posts($args);
            echo wp_get_attachment_image($images[0]->ID, $size='attached-image'); 
            ?>

            <div class="actions">
                <div class="btn download"></div>
                <div class="btn expand"></div>
            </div>
        </div>
    </div>

    <div class="post-info">
        <div class="post-date">
            <?php the_time('F j, Y'); ?>
        </div>
    </div>
</div>

CSS は最初にボタンを非表示にします。

.btn {
    display: none;
}

では、jQuery または純粋な CSS で、ホバーされた 1 つの投稿の「.btn」のみをターゲットにするにはどうすればよいですか? 500 ミリ秒のアニメーションがあるので、必要に応じて入れてください。CSS はもちろん素晴らしいですが、方法がわからないか、可能であれば、このターゲティングを使用します。ホバー トリガー要素は .post-image div であるため、ボタン自体の上にホバーしたときにホバーが失われることはありません。

4

2 に答える 2

0

一般的な投稿に共通するクラスではなく、投稿の ID をターゲットにする必要があります。質問にはIDが表示されていないため、詳細を説明することはできませんが、それをターゲットにするには、次のようなものを使用できます

.btn#targetID:hover {
    /* Your CSS here */
}
于 2013-07-12T18:43:02.237 に答える
0

CSS(3)

:hoverデフォルトと css3 トランジションを使用して、必要な効果を得ることができます。

.post-holder .btn {
  visibility:hidden; // display:none breaks transitions
  height:0;
  opacity:0;
  -webkit-transition: opacity .5s ease-in-out;
  -moz-transition: opacity .5s ease-in-out;
  -ms-transition: opacity .5s ease-in-out;
  -o-transition: opacity .5s ease-in-out;
  transition: opacity .5s ease-in-out;
}


.post-holder:hover .btn {
  visibility:visible;
  height:auto;
  opacity:1;
}

codepen

jQuery

jQuery のhoverメソッドとtoggleメソッドを使用できます。

$(function(){
  $('.post-holder').hover( function(){
    $(this).find('.btn').stop().toggle('500');
  });
});

codepen

トランジションの「空想」の微調整はあなたに任せます。)

于 2013-07-12T18:49:25.607 に答える