0

我正在开发一个 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，因此当悬停在按钮本身上时悬停不会丢失。

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 的悬停和切换方法：

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

codepen

我将把过渡的“花哨”留给你；)

于 2013-07-12T18:49:25.607 回答