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

您需要定位帖子的ID，而不是一般的帖子常用类。您的问题中没有显示任何ID，因此我无法向您提供具体信息，但为了定位，您可以使用以下内容

.btn#targetID:hover {
    /* Your CSS here */
}

Answer 2

<强> 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

我将把过渡的“幻想”调整到你身边; ）

WordPress只在悬停时定位一个帖子

2 个答案: