hover時に全体の色を変化させたいです。

Question

前提・実現したいこと

Vueにてポートフォリオを現在作成中で、かなり初歩的な質問となりますが、
下記Chinemaの「C」のみ大きさと色（Cはグレー,hinemaは白）を変更し、hoverで全体Chimenaの色（ダークグレー）に変更するようにしたいのですが、現状「C」はhoverでは色が変わらない状況です。

spanタグをなくすと全体hoverは適用され色は変化します。

「C」のみ色を変えつつ、全体をhoverで色を変化させる方法分かる方いましたら
お力添えをいただきたいです。

よろしくお願いいたします。

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

<router-link to="/" class="header-ttl">
     <span style="color:grey; font-size:2.5rem">C</span>inema</router-link>

Comments

[dit.]

質問がまだ受付中になっています。
ベストアンサーを選び、解決済みにしてください。

Answer 1

vue は分からいですが、下記のようなHTMLになるとするなら、

<a href="#" class="header-ttl">
  <span style="color:grey; font-size:2.5rem">C</span>inema
</a>

CSSは下記でどうですか。
要素に直接スタイルを設定している場合は、それを上書きするには!importantを付加します。

a.header-ttl:hover,
a.header-ttl:hover span {
  color: darkgray !important;
}

Comments

[TMTN]

上記、試してみると解決する事ができました。
大変助かりました。ありがとうございました。