CSS鼠标🖱hover父节点，控制子节点的显示

在naive-ui里面，设鸡 🐔 师让搞一个效果，侧边菜单鼠标 🖱 悬浮上去，右边的箭头才显示 …

本质上就是如何父节点hover的时候，控制子节点的显示和隐藏，而且这个地方有个坑，他的CSS是跨层级的。

所以这个CSS很有代表性 🙄 …

1. 跨层级的节点不需要处理
2. 父节点的`hover`如何和子节点关联
3. `n-base-icon n-menu-item-content__arrow`这种内敛层级的`CSS`如何写

.side-menu {
  /** 鼠标悬浮到父级菜单的时候，右边的展开箭头才显示出来 ... */
  :deep(.n-base-icon.n-menu-item-content__arrow) {
    opacity: 0;
    transition: opacity 0.5s ease;
  }
  :deep(.n-menu-item:hover .n-base-icon.n-menu-item-content__arrow) {
    opacity: 1;
    transition: opacity 0.5s ease;
  }
}