now there is a nested structure
<style>
div{ display: inline-block; margin: 50px;}
.box-3{ width: 200px; height: 200px; background: pink}
.box-2{ background:rgb(113, 160, 179)}
.box-1{ background:thistle}
div:hover{ outline:2px dashed rebeccapurple}
</style>
<div class="box-1">
<div class="box-2">
<div class="box-3"></div>
</div>
</div>the effect I want to achieve is that the element that passes through will have the hover effect. In fact, when the hover reaches the child element, the parent element will also trigger the hover effect, which is somewhat similar to the bubbling
in js. 
is there a css solution?
Note: js can be implemented without js implementation method. Thank you
here is the js implementation demo
https://codepen.io/xboxyan/pe.