CSS悬停触发底层和顶层

How to make a css hover transition for both layers. I wrote the whole page so that you can (copy/paste) try it from your computer desktop. What I have works, but can it be done without javascript/jQuery with pure CSS? I tried with CSS pointer-events and was able to transition either the top layer (#circleOuter) or the underlaying layer (#circleInner) but not both layers. For this to work, #circleOuter:hover has to trigger #circleInner. Any help is appreciated.How to make a css hover transition for both lay