预加载可在Chrome（而非Firefox或Safari）上运行的图片

Question

目前，使用:: before元素来预加载鼠标悬停图像，从而可以在：hover上更改背景图像。它可以完美地在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>