当我们关注链接时，如何为孩子添加样式？

Question

Code:

<div id="div1">
    <div class="test1"></div>
    <div class="text1"><a href="#">test1</a>
    </div>
    <div class="test_block">text1</div>
</div>

<div id="div2">
    <div class="test2"></div>
    <div class="text2"><a href="#">test1</a>
    </div>
    <div class="">text2</div>
</div>

how make on css3 that when we focus on link(a:hover) children block test_block get css font-size:18px ?

PS: For example, when we hover on link test1 font-size for text1 will be 18 px and font-size for text2 wiil be 14px ;

When we we hover on link test2 font-size for text2 will be 18 px and font-size for text1 wiil be 14px ;

Answer 1

Use the adjacent sibling selector, + :

.text1,
.text2 {
    font-size: 14px;
}

.test1:hover + .text1,
.test2:hover + .text2 {
    font-size: 18px;
}