Fix hover images blink

时间：2019-03-05 作者：ZWPDev

我使用php生成了这个css脚本，它用于在用户悬停时显示wordpress的第二个特色图像。问题是图像在闪烁，我不知道如何解决这个小问题。有人能建议解决这个问题吗？我已经实现了lazyload，但在这种情况下它是无用的。

<div class="box">
      <?php $id = get_the_ID(); ?>
      <div class="rounded-circle" style="background-image:url(\'<?php the_post_thumbnail_url(\'full\'); ?>\')" id="staff-pic-<?php echo $id; ?>"></div>
      <?php if(class_exists(\'MultiPostThumbnails\')):
            $hover_pic = MultiPostThumbnails::get_post_thumbnail_url(get_post_type(),\'secondary-image\');
            endif;
            echo
            \'<style>
                #staff-pic-\'.$id.\'{
                background-size: cover;
                background-position: center;
                margin: auto;
                transition: all 300ms;
              }
              #staff-pic-\'.$id.\':hover{
                transition: all 300ms;
                background-image:url("\'.$hover_pic.\'") !important;
                background-size: cover;
                background-position: center;
                margin: auto;
              }
            </style>\';
      ?>
        <h3 class="text-center team-name"><?php the_title(); ?></h3>
        <p class="description text-center"><?php the_content(); ?></p>
    </div>

1 个回复
SO网友:Howard E

我的建议是使用background-image, 并同时加载两个图像。这将防止在第一次悬停时加载悬停图像时闪烁。如果将图像加载为图像而不是背景图像，则可以使用CSS将悬停图像的不透明度设置为0，然后在悬停时仅将不透明度设置为1。通过对图像使用绝对位置，它们应该相互重叠。

<div class="box">
    <?php $id = get_the_ID(); ?>
    <div class="rounded-circle staff-pic" id="staff-pic-<?php echo $id; ?>">
        <img src="<?php the_post_thumbnail_url(\'full\'); ?>" alt="<?php echo $id;?>" class="initial-image">
        <?php if(class_exists(\'MultiPostThumbnails\')):
            $hover_pic = MultiPostThumbnails::get_post_thumbnail_url(get_post_type(),\'secondary-image\');?>
            <img src="<?php echo $hover_pic;?>" class="hover-pic">
        <?php endif; ?>
    </div>
    <h3 class="text-center team-name">
        <?php the_title(); ?>
    </h3>
    <p class="description text-center">
        <?php the_content(); ?>
    </p>
</div>
使用以下CSS：

.rounded-circle.staff-pic {
    position: relative;
}
.initial-image {
    position: absolute;
    top:0;
    left:0;
    z-index: 1;
}
.hover-pic {
    position: absolute;
    top:0;
    left:0;
    opacity: 0;
    z-index: 2
}
.rounded-circle.staff-pic::hover .hover-pic {
    opacity: 1;
    transition: all 300ms;
}
您可能需要对css进行一些小的调整，但在没有实际看到布局的情况下，这应该是一个很好的开始。

标签： php   theme-development   css   小码农  

相关推荐

在本地主机上从切换到BREW php 7.2后出现cURL 28错误

自从（我相信！）我在本地Mac OS机器上用brew将PHP版本从7.0切换到7.2以来，我在本地主机上安装的Wordpress reporting cURL error 28（timeout）都遇到了麻烦。查看本地站点的任何管理区域或使用WP CLI，WP更新检查和其他cURL调用会导致cURL请求失败：警告：发生意外错误。WordPress可能有问题。org或此服务器的配置。如果您仍然有问题，请尝试支持论坛。（WordPress无法建立到WordPress.org的安全连接。请与服务器管理员联系。）在