Html 悬停父元素之后的CSS悬停元素

我有一个带有两个背景图像的分割屏幕。每一面都有一个image.png和一个image-hover.png。当我将光标放在背景图像或image.png上时，我想将image-hover.png放在image.png的顶部

我成功地做到了这一点，但当我将光标放在backgrund图像上时，鼠标悬停在image.png上，当我将光标拖动到image.png上时，鼠标悬停消失

这是我的页面：

这是我的代码：

@导入url（'https://fonts.googleapis.com/css?family=Open+Sans:400600800’；
html，正文{
身高：100%；
最小高度：18em；
背景：线性梯度（90度，#534591 50%，#e2d649 50%）；
}
斯坦加先生{
背景图像：url（“http://loopaa.com/split/left-side.png");
身高：100%；
}
德拉普塔先生{
背景图像：url（“http://loopaa.com/split/right-side.png");
身高：100%；
}
.分割窗格{
垫面：22%；
背景尺寸：封面；
背景重复：无重复；
背景位置：中心；
身高：100%；
字号：2em；
颜色：白色；
字体系列：“开放式Sans”，无衬线；
字体大小：300；
}
.拆分窗格>div{
位置：相对位置；
最高：40%；
-webkit转换：translateY（-50%）；
-ms转换：translateY（-50%）；
转化：translateY（-50%）；
文本对齐：居中；
}
.split窗格>div.text内容{
线高：1.6em；
边缘底部：1米；
}
.split pane>div.text content.big{
字号：2em；
文字装饰：无；
}
#cf{页边距：自动；
宽度：400px；}
#左快活{
宽度：400px；
高度：360px；
背景：url(http://loopaa.com/split/cc.png);
边界：0；
过渡：所有0.35秒的缓进缓出；
}
史丹加：悬停，向左，快活{
背景：url(http://loopaa.com/split/cc-hover.png)！重要；
过渡：所有1都容易进入；
}
#对呀，快活{
宽度：400px；
高度：360px；
背景：url(http://loopaa.com/split/cc2.png);
边界：0；
过渡：所有0.35秒的缓进缓出；
}
德拉普塔：停下来，好的，高兴{
背景：url(http://loopaa.com/split/cc2-hover.png)！重要；
过渡：所有1都容易进入；
}
.拆分窗格按钮、.拆分窗格a.按钮左侧、.拆分窗格a.按钮右侧{
字体系列：“开放式Sans”，无衬线；
字号：800；
背景：无；
边框：1px实心#3b3277；
-moz边界半径：5px；
-webkit边界半径：5px；
边界半径：5px；
宽度：15em；
填充：0.7em；
字体大小：0.5em；
文字装饰：无；
颜色：#3b3277；
显示：内联块；
光标：指针；
-moz转换：所有0.2秒都放松；
-o型过渡：所有0.2秒缓解；
-webkit过渡：所有0.2秒都可以轻松过渡；
过渡：所有0.2秒缓解；
}
.拆分窗格按钮：悬停，.拆分窗格a.按钮-左侧：悬停{
文字装饰：无；
背景色：#3b3277；
边框颜色：#3b3277；
光标：指针；
}
.按钮左{边框：1px实心#e1d622！重要；颜色：#e1d622！重要；边距底部：6px；}
.按钮左：悬停{背景色：#e1d622！重要；颜色：#3b3277！重要；}
.按钮右侧{边框：1px实心#3b3277！重要；颜色：#3b3277！重要；边距底部：6px；}
.按钮右侧：悬停{背景色：#3b3277！重要；颜色：#e1d622！重要；}
.uiux-side.split-pane按钮：悬停，.split-pane a.button-left:悬停{
颜色：#ffffff；
}
.frontend-side.split-pane按钮：悬停，.split-pane a.button-left:悬停{
颜色：蓝色；
}
#bg标志{边界半径：50%；
宽度：125px；
高度：125px；
背景：#ffffff；
保证金：自动；
填充顶部：38px；
}
#拆分窗格或{
字号：2em；
颜色：白色；
字体系列：“开放式Sans”，无衬线；
文本对齐：居中；
宽度：100%；
位置：绝对位置；
最高：43.5%；
-webkit转换：translateY（-50%）；
-ms转换：translateY（-50%）；
转化：translateY（-50%）；
}
.大{
字号：2em；
}
#口号{
位置：绝对位置；
宽度：100%；
z指数：100；
文本对齐：居中；
垂直对齐：基线；
顶部：0.5em；
颜色：白色；
字体系列：“开放式Sans”，无衬线；
字号：1.4em；
}
#标语img{
高度：0.7em；
}
.文本内容p{
文本转换：大写；
字体大小：1.6rem；
字号：600；
线高：140%；
边缘顶部：12px；
}
.大{
字号：800；
}
@仅介质屏幕和（最大宽度：1368px）{
.拆分窗格{}
.split pane>div.text content.big{font size:1em；}
.split pane>div.text内容{行高：1em；页边距底部：0；}
.text内容p{页边空白顶部：8px；字体大小：1.4rem；}
}
@仅介质屏幕和（最大宽度：1025px）{
.拆分窗格{}
.split pane>div.text content.big{font size:1.4em；}
#左快活{
宽度：200px；
高度：180像素；
背景：url(http://loopaa.com/split/cc-min.png);
}
史丹加：悬停，向左，快活{
背景：url(http://loopaa.com/split/cc-min-hover.png)！重要；
}
#cf{宽度：200px；}
#对呀，快活{
宽度：200px；
高度：180像素；
背景：url(http://loopaa.com/split/cc-min.png);
}
德拉普塔：停下来，好的，高兴{
背景：url(http://loopaa.com/split/cc-min-hover.png)！重要；
}
}
@介质（最大宽度：801px）和（最小宽度：738px）{
#bg徽标{显示：无；}
.拆分窗格{}
.split pane>div.text内容{行高：1.6em；页边距底部：10px；}
}
@仅介质屏幕和（最大宽度：737px）{
#bg徽标{显示：无；}
.拆分窗格{填充顶部：5%；}
.split pane>div.text content.big{font size:1em；}
.split pane>div.text内容{行高：1em；页边距底部：0；}
.text内容p{页边空白顶部：8px；字体大小：1.4rem；}
}
@仅介质屏幕和（最大宽度：569px）{
#cf{显示：无；}
.split pane>div.text content.big{font size:1em；}
.split pane>div.text内容{行高：1em；页边距底部：0；}
.text内容p{页边空白顶部：8px；字体大小：1.4rem；}
}
@仅介质屏幕和（最大宽度：568px）{
#cf{显示：无；}
.split pane>div.text content.big{font size:0.9em；}
.split pane>div.text内容{行高：1em；页边距底部：0；}
.text内容p{页边空白顶部：8px；字体si
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
width: 20%;