【CSS】親要素がhoverしたら子要素を変えたい【869回目】

親要素のhoverで変化したい

<a class="parent">
    <div class="child1"></div>
    <div class="child2"></div>
</a>

こんなふうに、親のaタグがhoverされた時にだけ、子要素が変わるものを書きたい

親要素のhoverと子要素のクラスとセットに書く

.parent:hover .child1 {
    display:none;
}

これで、親がhoverなったときにだけ、上のCSSは動くようになる