我正在开发一个 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,这样悬停在按钮本身上时不会丢失。
最佳答案
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;
}
jQuery
您可以使用 jQuery 的 hover和 toggle方法:
$(function(){
$('.post-holder').hover( function(){
$(this).find('.btn').stop().toggle('500');
});
});
我会把调整过渡的“花哨”留给你; )
关于jquery - WordPress 在悬停时只针对一篇文章,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17621822/