質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

993閲覧

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

退会済みユーザー

退会済みユーザー

総合スコア0

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2016/11/07 13:09

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

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

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

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

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

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

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

これでいいんですかね?

css

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

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

html

1<!-- お茶の部分 --> 2<section> 3<figure> 4 <img src="http://bit.ly/2fTjc31" class="coffe" target="_blank"> 5</figure> 6 7<h2 class="zakkuri-blue">画像ホバーで青くなる①</h2> 8 9<p class="btn-blue"><a href="http://example.com">ボタン青①</a></p> 10</section> 11 12<!-- コーヒーの部分 --> 13<section> 14<figure> 15 <img src="http://bit.ly/2fgCfR6" class="coffe" target="_blank"> 16</figure> 17 18<h2 class="zakkuri-blue">画像ホバーで青くなる②</h2> 19 20<p class="btn-horizon"> 21 <span class="btn-yel-horizon"><a href="http://example.com">ボタン黄②</a></span> 22 <span class="btn-blue-horizon"><a href="http://example.com">ボタン青②</a></span> 23</p> 24</section>

投稿2016/11/07 13:22

編集2016/11/07 13:34
gin

総合スコア2722

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2016/11/07 13:28

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

2016/11/07 13:34

htmlにも修正が必要だったので追記しました~
退会済みユーザー

退会済みユーザー

2016/11/07 13:40

わちゃちゃ、ほんとですね。私が気づかずすみません。 ありがとうございます。早速試してみます!!
退会済みユーザー

退会済みユーザー

2016/11/07 13:47

あ、なるほど。 私は実は、お茶の部分とコーヒーの部分をそれぞれ <li> お茶の部分 </li> <li> コーヒーの部分 </li> というふうに<li>で囲っていたため平気だったみたいです。 すみません。質問のコードでは「別にいらないかな」っと思い<li>を割愛してしまいました。 余計なご心労をかけてしまい、申し訳ございませんでした。 でも、勉強になりました(←勝手なヤツ笑)
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問