画像ホバー時に、画像以外にも２つの要素の色を変えたいです。(合計３つ)

Question

###■やりたいこと
画像ホバー時に別の要素の色を変えたいです。
ただし、画像とさらに２つの要素の色を、です。(合計で３つ)

###■いまの状態
「＋○○」という方法で、「gazou」以外の「aokunaru」だけは色が変わりました。
しかし「btn」という要素も変えたいのです。
いまの状態はこちらです↓
https://jsfiddle.net/path29hu/

.gazou:hover + .aokunaru {
    background: #4285F4;
    transition: 0.2s;
}

###■ためしたこと
【その１】

.gazou:hover + .aokunaru + .btn {
    background: #4285F4;
    transition: 0.2s;
}

【その２】

.gazou:hover + .aokunaru:hover + .btn {
    background: #4285F4;
    transition: 0.2s;
}

###■これはダメなこと
いまの状態のような「＋○○」だけでなく「~」という方法もあるようです。でもそれダメです。要素は連続してあるわけではないからです。わがままでスミマセン。。

Answer 1

さっきやったこれでいけると思います～

.gazou:hover ~ .btn {
    background: #4285F4;
	transition: 0.2s;
}

Comments

[退会済みユーザー]

あれ！？で、、できた！！？？笑

いえ！違うんです！さきほど教えていただいたそれをないがしろにするほど恩知らずではない、、つもりだったんです。だってほら、質問文にも『「~」はダメでした』って、書いてあるじゃないですか？ほんと、１回試して、ダメだったんです！！ホントなんです！！！笑
あれぇ~???www

[退会済みユーザー]

失礼しました。錯乱しました。m(__)m
たびたびのご教示、まことにありがとうございます。

…ちゃんと復習しておきます。笑

[gin]

3つ一度「.gazou:hover ~ .aokunaru ~ .btn { ... }」に書いちゃったとか？

[退会済みユーザー]

うーん、でも、うーん(゜-゜)
正しい記述だったような…
ひょっとすると半角全角とかのお話しかも。
あ、でもそうだすると別の方にさきほどご指摘いただいた「全角だからCSSが効かないんだよ」という教えが、結局活かせていないことになってしまう…笑

[gin]

じゃあ、うっかりこれ「.aokunaru:hover ~ .btn { ... }」だったということにしましょうｗ

[退会済みユーザー]

そぉいえばそーでしたぁ！！ww

[退会済みユーザー]

ところでこれって、双方向に適用させる方法もあるのでしょうか？

今ginさんに教えていただいて、【こちら↓】を追加しました。

.gazou:hover ~ .btn {
background: #4285F4;
transition: 0.2s;
}

けれど、さらに【双方向↓】にもしたい。

.gazou:hover ~ .btn {
background: #4285F4;
transition: 0.2s;
}
.btn:hover ~ .gazou {
background: #4285F4;
transition: 0.2s;
}

という場合です。
双方向にホバーしたら同じアクションを適用したい。と思ったら、【双方向】の記述では適用されませんでした。

「+」とか「～」以外の印があるのでしょうか？

む！さては「⇔」か！？
…違いました。笑

しかしこれは後世のためにも別質問の方がいいでしょうか。

[gin]

できませんね。
兄は弟のいうことは聞かないのですｗ
どうしてもの場合はJS使うしかないですね～

[退会済みユーザー]

うけるw家族のたとえww

なるほど。
原則をご理解なさっていると、できることとそうでないことが事前に分かるから良いですな☆
ちょっとどうなのかな程度の質問でしたので、JSを使うほどとなると腰がザーっと引けますね。

たびたびのご返信、まことにありがとうございますm(__)m

[gin]

CSS4になれば兄はないっぽいけど親を参照できるっぽいんでゴニョゴニョやればできなくはなさそうな気がする。
まあ、先の話ですが。