jquery - WordPress 在悬停时只针对一篇文章

Question

我正在开发一个 wordpress 主题。使用 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，我如何只定位悬停的一个帖子上的“.btn”？它将有一个 500 毫秒的动画，所以如果你喜欢就把它放在那里。 CSS 当然会很好，只是不知道如何或如果可能的话，用它来定位。悬停触发元素是 .post-image div，这样悬停在按钮本身上时不会丢失。

Answer 1

CSS(3)

您可以使用默认的 :hover 和 css3 transitions 获得您想要的效果:

.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

我会把调整过渡的“花哨”留给你； )