php - 预加载在 Chrome 上工作的图像，而不是 Firefox 或 Safari

Question

目前有这个解决方案可以在:hover 上更改背景图像，使用::before 元素预加载到悬停图像。它可以在 Chrome 上完美运行，但不能在 Firefox 或 safari 上运行，我已经环顾四周，尝试了一些东西，但从未成功。

想法？

代码：

    <div class="services-row">
    <div class="grid-x">
        <?php if ( have_rows( 'services' ) ) : ?>
            <?php $counter; ?>
            <?php while ( have_rows( 'services' ) ) : the_row(); ?>
                <?php $service_image = get_sub_field( 'service_image' ); ?>
                <?php $service_hover_image = get_sub_field( 'service_hover_image' ); ?>

                <?php $counter ++; ?>

                <style type="text/css">
                    .blockNumber-<?php echo $counter; ?> {
                        background-image: url('<?php echo $service_image['url']; ?>');
                        transition: .5s;
                    }
                    .blockNumber-<?php echo $counter; ?>::before {
                        content: url('<?php echo $service_hover_image['url']; ?>');
                        display: none;
                    }
                    .blockNumber-<?php echo $counter; ?>:hover {
                        background-image: url('<?php echo $service_hover_image['url']; ?>');
                        transition: .5s;
                    }

                </style>

                <?php $service_image = get_sub_field( 'service_image' ); ?>
                <div class="inner-service small-12 medium-6 large-3 cell blockNumber-<?php echo $counter; ?>">
                    <span class="service-title"><a href="<?php the_sub_field('service_link'); ?>"><?php the_sub_field( 'service_title' ); ?></a></span>
                </div>



            <?php endwhile; ?>
        <?php else : ?>
            <?php // no rows found ?>
        <?php endif; ?>

    </div>
</div>

标签： phpwordpressfirefoxadvanced-custom-fieldspreload