Css 是否可以在鼠标移出时反转转换执行？

我有两个元素，一个嵌套在另一个中。这两个元素应用了不同的过渡效果，我喜欢在鼠标离开父元素时反转效果顺序

我的代码如下所示：

.parent{
宽度：200px；
高度：200px；
背景色：#AF0；
位置：相对位置；
过渡：背景色0.22s缓变；
}
.孩子{
宽度：100px；
高度：100px；
位置：绝对位置；
左：0；
排名：0；
背景：#0AF；
过渡：所有0.22秒都放松1秒；
}
.家长：悬停{
背景色：#FA0；
}
.parent:悬停.child{
宽度：200px；
高度：200px；
背景：#0FA；
}

您需要在过渡中添加一个，并使其与普通和悬停不同

孩子需要在悬停状态下等待1s，但在鼠标离开时立即运行

父级需要在鼠标悬停时立即运行，但在鼠标悬停时等待1s，因此子级首先运行

.parent{
宽度：200px；
高度：200px；
背景色：#AF0；
位置：相对位置；
过渡：背景色0.22s缓变；
/*鼠标移出延迟-等待1s，等待孩子完成*/
过渡延迟：1s；
}
.孩子{
宽度：100px；
高度：100px；
位置：绝对位置；
左：0；
排名：0；
背景：#0AF；
过渡：所有0.22秒都会变缓；
/*延迟鼠标移出-立即运行*/
转换延迟：0s；
}
.家长：悬停{
背景色：#FA0；
/*延迟等待mousein-立即运行*/
转换延迟：0s；
}
.parent:悬停.child{
宽度：200px；
高度：200px；
背景：#0FA；
/*鼠标输入延迟-等待父项1s*/
过渡延迟：1s；
}

检查此项

.parent{
宽度：200px；
高度：200px；
背景色：#AF0；
位置：相对位置；
过渡：背景色0.5s缓变；
}
.孩子{
宽度：100px；
高度：100px；
位置：绝对位置；
左：0；
排名：0；
背景：#0AF；
过渡：所有0.22秒缓解0.2秒；
}
.家长：悬停{
背景色：#FA0；
过渡：背景色0.22秒缓变
}
.孩子：悬停{
宽度：200px；
高度：200px；
背景：#0FA；
过渡：背景色0.50秒缓变
}