父子块元素初始化样式设置background- image，hover时改变两个块元素的background- image，初次hover会闪一下。

目前在做一个PC端项目，问题场景：

首页图片，父元素设置background- image为图片，子元素设置background- image为渐变色背景，当hover时候，更换父子元素的background- image图片或者背景色。

当页面初始化后，鼠标第一次hover，图片会闪一下hover时的渐变色背景，然后正常显示hover设置的父子background- image样式，之后每一次hover样式正常展示。

代码如下：

.item_box_w {

        background: url("/images/home_bg/case/wl.png");

        .item_box {

                background: linear-gradient(180deg, #4f6ca6 28%, rgba(80, 109, 166, 0.5) 100%);

        }

}

.item_box_w:hover {

        background: url("/images/home_bg/case/wlhover.png");

        .item_box {

             background: linear-gradient(180deg, #1c61eb 31%, rgba(28, 97, 235, 0.15) 100%);

        }

}

起初找不到问题原因，因为本地环境不会有这种情况，只有发到测试环境才会有。但是问题就是问题，我一次一次在测试环境初始化，观察初次hover的页面效果，最终确定原因是：父子元素的background-image加载顺序导致。

由于父元素background-image设置的是图片，子元素background-image设置的是渐变色，当鼠标初次hover是，二者同时加载，图片加载速度较慢，所以出现了上述的问题。

解决思路：将hover时需要展示的父元素图片背景在初始化时就加载到页面上，但是不展示，等到鼠标hover时再展示出来。

接下来就是不断的修改发测试修改发测试，功夫不负有心人～最终修改成功。

实现方法：在父子元素中间加一层盒子，原来的父元素变成祖父元素，新加的元素则为父元素。页面初始化时候，设置新的父元素background-image为hover时图片背景，background-size设为0，然后在hover时，设置新的父元素background-size为auto，用新父元素的背景覆盖祖父元素的background-image，代码如下：

.item_box_w {

        background: url("/images/home_bg/case/wl.png");

        .item_box_colorful {

                background: url("/images/home_bg/case/wlhover.png");

                background-size: 0;

                .item_box {

                        background: linear-gradient(180deg, #4f6ca6 28%, rgba(80, 109, 166, 0.5) 100%);

                }

        }

}

.item_box_w:hover {

        .item_box_colorful {

                background-size: auto;

                .item_box {

                     background: linear-gradient(180deg, #1c61eb 31%, rgba(28, 97, 235, 0.15) 100%);

                }

        }

}

就这样实现啦，原理就是初始化加载图片但不展示，需要的时候展示，就不会有加载先后的问题。

人生中第一篇博客，诚惶诚恐，请大家批评指正不吝赐教哦～如果有更好的实现思路，欢迎评论留言呀～