次の要素と連動させるcss

タイトルからして説明がヘタですいません。
あとでちゃんと見やすいひな形ができたらいいなぁと思いながら、
とりあえずメモさせていただきます。

例：Aさんの画像の横に、「Aさん」というリンクがあります。
リンク範囲にhoverすると、cssで境界線の色が変わる仕様です。

あとからお客さんに言われました。

「Aさんの画像にもリンク貼ってよ」

そうですよね、そう思います。
（例によって、別の人がコーディングをしています）

現在HTML：
<div>
<p><img src="img_01.png" alt="Aさん"></p>
<p class="link_box"><a href="#">Aさん</a></p>
</div>

現在のcss：
.link_box {
border: 1px solid #cccccc;
}


Aさんの画像にhoverした時に、.link_boxの枠アクション（なんだそれ）もしたい。

え、そんな、連動できるんですか？？



できるHTML：
<div>
<a href="a_box"><p><img src="img_01.png" alt="Aさん"></p></a>
<p class="link_box"><a href="#">Aさん</a></p>
</div>

できるcss：
.link_box {
border: 1px solid #cccccc;
}

.a_box {
display:inline-block;
}

.a_box:hover + link_box {
border: 1px solid #cccccc;
}


できた！




解説のようなメモ

セレクタで「＋」を使用することで、
兄弟要素のcssを操作することができます。

便利！