ある要素をマウスオンしたときに別の要素を変化させたい

Question

前提・実現したいこと

特定の要素にマウスカーソルが乗った時、別の要素のデザインを変化させたいです。
今回は、試しに文字の色を変えようとしています。

発生している問題・エラーメッセージ

トリガーを親要素にしない限り変化しなくて困っています。

該当のソースコード

ボタンにマウスカーソルが乗ったら、「お気に入り登録」の文字を赤色にしようとしています。

<div class="oya">
    <span class="expert">お気に入りに登録 </span>
    <span class="trigger"><button><i class="far fa-heart"></i></button></span>
</div>

.trigger:hover .expert {
    color: red ;
}

これだとマウスオンしても何も起こりません。

試したこと

CSSを下記のようにすれば、マウスオンで文字が赤色になります。

.oya:hover .expert {
    color: red  ;
}

しかし、これだと当たり判定が広すぎるので、
ボタンにマウスカーソルが乗った時だけ書式を変化させたいです。

ほかの質問（https://teratail.com/questions/130288）を参考に、下記のようなCSSも試しました。
(+を使うやつ)

.trigger:hover + .expert {
    color: red ;
}

しかし、何も起こりませんでした。

補足情報（FW/ツールのバージョンなど）

html5
css3

何かやり方があるのでしょうか？
それともjavascriptを使わないとできないことなのでしょうか？

Answer 1

現状CSSでは無理です。
hoverする要素から遡らずに、後方に存在するHTML要素に対して修飾が可能です。
どうしても必要であればjsを利用ください

Comments

[bokupiroki]

「hoverする要素から遡らずに、後方に存在するHTML要素に対して修飾が可能です。」
試してみたところ、まさにその通りでした。
すっきりしました。ありがとうございます。

javascriptで検討します。

Answer 2

CSSは、現状のブラウザが対応している範囲だと、先読みして評価することができないです。
つまり「子要素に～～がある要素」とか「後に～～が続く要素」は指定できません。
できることは、「親要素に～～がある要素」とか「～～に続く要素」です。

---

そういうわけで、HTMLを入れ替えれば可能です。
たとえば：

サンプル

<div class="oya">
    <span class="trigger"><button><i class="far fa-heart"></i></button></span>
    <span class="expert">お気に入りに登録 </span>
</div>

.oya{
  display: flex;
  flex-flow: row-reverse;
}

.trigger:hover+.expert {
    color: red ;
}