css - （仅限 CSS）动态创建新子代时更改父代

Question

有没有办法检测是否在只有 css(scss/sass) 的父级中创建了一个新子级？

我有以下代码

.toast-bottom-right:hover {
  max-height: 40%;
}

.toast-bottom-right:not(:hover) > .toast-error:not(:first-child) {
  display: none;
}

.toast-bottom-right:not(:hover){
  animation: collapse 2s 1s forwards;
}

.toast-bottom-right {
  max-height: 40%;
  overflow-y: scroll;
  -ms-overflow-style: none;
  overflow: -moz-scrollbars-none;
}

.toast-bottom-right::-webkit-scrollbar {
  display: none;
}

@keyframes collapse{
  from  {
    max-height: 40%;
  }
  to {
    max-height: 1.5%;
  }
}

这会在悬停时弹出一个父元素（所有子元素），然后当悬停关闭所有子元素但第一个被隐藏时。一秒钟后，父级最大高度被设置为一个小尺寸（1.5%），这导致父级变成一个小条。然后可以将其悬停在其上。

我的目标是在添加新孩子时将父母的最大高度更改为其原始状态（40％），并且在 5 秒后重新开始悬停动画

具体的问题：有没有办法做到这一点，或者只有css（scss / sass）接近这个？

标签： csssassparent-childonchange