Question

使用Wordpress Post特色图片调用的缩略图似乎工作正常，直到我尝试在翻转时对它们应用不透明度/饱和度效果。当盘旋时，其中5个中有4个＆＃34;闪烁＆＃34;。我认为我的代码中可能还有其他内容会导致故障，因为当我尝试添加另一个<span>或<div>以在缩略图中包含帖子标题时，它们无法正确显示在翻滚也是如此。

这是影响拇指的CSS：

#columns {
    width: 90%;
    max-width: 970px;
    font-size: 16px;
    min-height: 300px;
    -moz-column-count: 5;
    -moz-column-gap: 5px;
    -moz-column-fill: auto;
    -webkit-column-count: 5;
    -webkit-column-gap: 5px;
    -webkit-column-fill: auto; 
    column-count: 5;
    column-gap: 5px;
    column-fill: auto;
    margin: 0 auto;
    overflow: auto;
}
.pin {
    -moz-column-break-inside: avoid;
    -webkit-column-break-inside: avoid; 
    column-break-inside: avoid; 
    position: relative;
    border: 0;
}
.pin img {
    width: 100%;
    height: auto;
    margin: 5px 0 0 0;
}
.post-wrapper:hover img {
    -webkit-transition:all .4s;
    -moz-transition:all .4s;
    -ms-transition:all .4s;
    -o-transition:all .4s;
    transition:all .4s;
}
.post-wrapper:hover img {
    -webkit-filter:grayscale(100%);
    -moz-filter:grayscale(100%);
    -ms-filter:grayscale(100%);
    -o-filter:grayscale(100%);
    filter:grayscale(100%);
}

这是我的主页的HTML：

<?php get_header(); ?>
<div id="main">

  <div id="columns">
  <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <div class="pin">

        <span class="post-wrapper">
<a href="<?php the_permalink() ?>"><?php echo get_the_post_thumbnail( $post_id, $size=0, $attr ); ?></a>
        </span>

    </div>
  <?php endwhile; ?> 
  <?php endif; ?>    
  </div>     

</div>
<?php get_footer(); ?>

这是我正在努力获得更好主意的测试网站： http://cks.whiterabbitstudio.us/

我确实已经尝试将-webkit-transform:translate3d(0,0,0);添加到.post-wrapper:hover img而没有太多运气。

Answer 1

不确定这是否会解决您的问题，但是在启动JQuery库（第51行）之前，您在标题（第20行）中调用此JQuery代码会导致控制台错误。

jQuery(function() {
        jQuery( "div.gallery br" ).remove();
});

其次，您正在引用一个不存在的JS文件

http://cks.whiterabbitstudio.us/wp-content/themes/CKS/js/scripts.min.js?ver=4.3.1

我建议首先清除这些问题，它们可能会帮助您解决悬停问题。

缩略图闪烁翻转与css过渡

1 个答案: