画像ホバー時に、道連れアクションが起こしたい。(~とか+の応用方法を教えて欲しいです)

Question

###■やりたいこと
画像ホバー時に、道連れアクションが起きません(>_<)
親要素を消せばちゃんと道連れになるのですが、消さずに起こしたいです。

###■いまの状態
https://jsfiddle.net/ademr68a/

目的の要素「btn-blue-horizon」の、親要素「btn-horizon」を消すと、きちんと道連れになります。

でも、「display:flex;」をやりたいので、消すわけにはいきません。

で、消さずにいると、目的の要素「btn-blue-horizon」が、figureホバーと道連れに青くなってくれないのです。

黄色はならなくてOKです。青だけでいいのです。

これって、、なんとかなりませんでしょうか？

Answer 1

これでいいんですかね？

/*質問箇所(これも青くしたい)*/
figure:hover ~ .btn-horizon .btn-blue-horizon{
  background: #4285F4;
}

###追記
あ。
このままだとお茶マウスオーバーでもコーヒーの色が変わるのでsectionやdivか何かでくくってください。

<!-- お茶の部分 -->
<section>
<figure>
　<img src="http://bit.ly/2fTjc31" class="coffe" target="_blank">
</figure>

<h2 class="zakkuri-blue">画像ホバーで青くなる①</h2>

<p class="btn-blue"><a href="http://example.com">ボタン青①</a></p>
</section>

<!-- コーヒーの部分 -->
<section>
<figure>
　<img src="http://bit.ly/2fgCfR6" class="coffe" target="_blank">
</figure>

<h2 class="zakkuri-blue">画像ホバーで青くなる②</h2>

<p class="btn-horizon">
　<span class="btn-yel-horizon"><a href="http://example.com">ボタン黄②</a></span>
　<span class="btn-blue-horizon"><a href="http://example.com">ボタン青②</a></span>
</p>
</section>

Comments

[退会済みユーザー]

属している親要素を書くけば出来るのですね！
書かないとできませんもんね。
ふむむ、まったく知りませんでした。。(/o＼)
いつもありがとうございます!!

[gin]

htmlにも修正が必要だったので追記しました～

[退会済みユーザー]

わちゃちゃ、ほんとですね。私が気づかずすみません。
ありがとうございます。早速試してみます！！

[退会済みユーザー]

あ、なるほど。
私は実は、お茶の部分とコーヒーの部分をそれぞれ

<li>
お茶の部分
</li>
<li>
コーヒーの部分
</li>

というふうに<li>で囲っていたため平気だったみたいです。

すみません。質問のコードでは「別にいらないかな」っと思い<li>を割愛してしまいました。
余計なご心労をかけてしまい、申し訳ございませんでした。

でも、勉強になりました(←勝手なヤツ笑)