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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

Q&A

解決済

3回答

2898閲覧

【CSS】マウスオーバー(hover)で画像を下に表示

EXIT

総合スコア43

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

1グッド

1クリップ

投稿2019/02/20 06:28

編集2019/02/20 08:50

問題

ホバーしても画像が表示されない。& 下にいない。
ホバーで出てこない

現状

html

1<header> 2  <a href="index.html" class="logo"> 3    <img src="img/logo.png" alt="logo" width="68" height="41.125"/> 4  </a> 5 6<!-- ホバー関連部、ここから --> 7  <div class="wrap"> 8    <a href="mailto:~~" class="mail"> 9      <img src="img/mail.svg" alt="mail" width="31"/> 10    </a> 11      <img class="balloon" src="img/balloon.svg" alt="balloon" width="45"/> 12  </div> 13<!-- ここまで --> 14 15  <nav> 16    <ul> 17 <li class="current"> 18 <a href="index.html"> 19 ALL 20 </a> 21 </li> 22 <li class="1"> 23 <a href=""> 24 1 25 </a> 26 </li> 27 <li class="2"> 28 <a href=""> 29 2 30 </a> 31 </li> 32 <li class="3"> 33 <a href=""> 34 3 35 </a> 36 </li> 37 <li class="4"> 38 <a href=""> 39 4 40 </a> 41 </li> 42    </ul> 43  </nav> 44</header>

css

1header { 2 width: 100%; 3 position: fixed; 4 z-index: 30; 5} 6 header .logo { 7 float: left; 8 margin-top: 21px; 9 margin-left: 35px; 10} 11 12/* ホバー関連部、ここから */ 13.wrap { 14 position: relative; 15} 16.mail { 17 float: right; 18 margin-top: 29px; 19 margin-right: 47px; 20} 21.balloon { 22 position: absolute; 23 display: none; 24 top: 16px; 25} 26.mail:hover .balloon { 27 display: block; 28} 29/* ここまで */ 30 31nav { 32 text-align: right; 33 margin-right: 137px; 34 margin-bottom: 60px; 35} 36nav ul { 37 margin: 0; 38 list-style-type: none; 39 padding-left: 0; 40} 41nav li { 42 display: inline-block; 43 padding-top: 32px; 44 padding-right: 41px; 45 font-size: 15px; 46} 47nav li > a { 48 text-decoration: none; 49 color: inherit; 50} 51nav li > a:hover { 52 color: royalblue; 53}

試したこと

css

1.wrap { 2 position: relative; 3} 4.mail { 5 float: right; 6 margin-top: 29px; 7 margin-right: 47px; 8} 9.balloon { 10 position: absolute; 11 display: none; 12 top: 16px; 13} 14.mail:hover .balloon { 15 background: url(../img/balloon.svg); /* 変更。変化なし */ 16}

追記

ありがとうございます!
下にこない
右にいきました!でも、mailの下にきません…
(すいません。.wrap:hoverのにするとちらつきなくなりました。(一瞬下にシュッと通るのはheaderより下の要素に効果つけてるやつなので関係ありません))
&
下がった
.wrapのブロックがあるからだと、

css

1.wrap { 2 width: 31px; /* .mailのimgと同じ幅 */ 3 float: right; 4}

と入れてみたんですが、Chromeがバグって強制終了してしまいました。

よろしくお願いします。

naikoru👍を押しています

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

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

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

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

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

EXIT

2019/02/21 11:16

追記はmiyabi_takatsukさんに宛てた現状報告なのですが(コメントでは画像などで説明できないため)、この投稿をどう見たら「丸投げ」になるのでしょうか。 低評価マニアの方々でしょうか。不思議で迷惑なのでやめてください。
guest

回答3

0

自己解決

headerをinline-blockから flexbox に変更し、教えてくださったことを参考にしながら調整した所、無事解決することができました。
本当にありがとうございました!!

できた
mailballoonの画像の間にカーソルが来るとドゥルルルとちらつきますが、まあ許容範囲です笑 もし解決策わかる方いましたら教えていただけると嬉しいです!)

html

1<header> 2 <a href="index.html" class="logo"> 3 <img src="img/logo.png" alt="logo" width="68" height="41.125"/> 4 </a> 5 <nav> 6 <ul> 7 <li class="current"> 8 <a href="index.html"> 9 ALL 10 </a> 11 </li> 12 <li class="1"> 13 <a href=""> 14 1 15 </a> 16 </li> 17 <li class="2"> 18 <a href=""> 19 2 20 </a> 21 </li> 22 <li class="3"> 23 <a href=""> 24 3 25 </a> 26 </li> 27 <li class="4"> 28 <a href=""> 29 4 30 </a> 31 </li> 32 </ul> 33 </nav> 34<!-- ホバー関連部、ここから --> 35 <div class="wrap"> 36 <a href="mailto:~~"> 37 <img src="img/mail.svg" alt="mail" class="mail" width="31"/> 38 </a> 39 <img class="balloon" src="img/balloon.svg" alt="balloon" width="45"/> 40 </div> 41<!-- ここまで --> 42</header>

css

1header { 2 display: flex; 3 position: fixed; 4 justify-content: flex-end; 5 align-items: center; 6 width: 100%; 7 z-index: 30; 8 padding: 21px 47px 60px 35px; 9} 10header ul { 11 display: flex; 12 padding-right: 60px; 13} 14header li { 15 padding-right: 41px; 16 font-size: 15px; 17} 18header li:last-child { 19 padding-right: 0; 20} 21header li > a { 22 text-decoration: none; 23 color: inherit; 24} 25header li > a:hover { 26 color: royalblue; 27} 28.logo { 29 margin-right: auto; 30} 31 32/* ホバー関連部、ここから */ 33.wrap { 34 position: relative; 35} 36.wrap a { 37 display: block; 38 height: 21.688px; 39} 40 41.mail { 42 display: inline-block; 43} 44 45.balloon { 46 display: none; 47 position: absolute; 48 padding-top: 16px; 49 left: -7px; 50} 51 52.wrap a:hover + .balloon { 53 display: inline-block; 54} 55/* ここまで */

投稿2019/02/21 11:08

編集2019/02/21 17:01
EXIT

総合スコア43

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

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

0

質問修正と、
コメントを受けまして、再度回答させていただきます。

HTMLの構成から見直された方がいいかと思います。
下記でいかがでしょうか。

html

1<header> 2  <a href="index.html" class="logo"> 3    <img src="img/logo.png" alt="logo" width="68" height="41.125"/> 4  </a> 5 6<!-- ホバー関連部、ここから --> 7  <p class="wrap"> 8    <a href="mailto:~~" class="mail"> 9      <img src="img/mail.svg" alt="mail" width="31"/> 10      <img class="balloon" src="img/balloon.svg" alt="balloon" width="45"/> 11 </a> 12  </p> 13<!-- ここまで --> 14 15  <nav> 16    <ul> 17 <li class="current"> 18 <a href="index.html"> 19 ALL 20 </a> 21 </li> 22 <li class="1"> 23 <a href=""> 24 1 25 </a> 26 </li> 27 <li class="2"> 28 <a href=""> 29 2 30 </a> 31 </li> 32 <li class="3"> 33 <a href=""> 34 3 35 </a> 36 </li> 37 <li class="4"> 38 <a href=""> 39 4 40 </a> 41 </li> 42    </ul> 43  </nav> 44</header>

css

1header { 2 width: 100%; 3 position: fixed; 4 z-index: 30; 5} 6 header .logo { 7 float: left; 8 margin-top: 21px; 9 margin-left: 35px; 10} 11 12/* ホバー関連部、ここから */ 13.wrap { 14 text-align: right; 15} 16.mail { 17 display: inline-block; 18 margin-top: 29px; 19 margin-right: 47px; 20 position: relative; 21} 22.balloon { 23 position: absolute; 24 left: 0; 25 display: none; 26 top: 100%; 27} 28.mail:hover .balloon { 29 display: inline-block; 30} 31/* ここまで */ 32 33nav { 34 text-align: right; 35 margin-right: 137px; 36 margin-bottom: 60px; 37} 38nav ul { 39 margin: 0; 40 list-style-type: none; 41 padding-left: 0; 42} 43nav li { 44 display: inline-block; 45 padding-top: 32px; 46 padding-right: 41px; 47 font-size: 15px; 48} 49nav li > a { 50 text-decoration: none; 51 color: inherit; 52} 53nav li > a:hover { 54 color: royalblue; 55}

.mailの位置取りにfloatを使うのをやめ、
.balloonを、.mailの中にいれ、
.mailの位置を基準に、.balloonの位置どりをしました。

----- 下記元回答 -----

おそらくですが、
中のものにfloat効かせているため、.wrapの高さが0になっているのが原因でしょう。
floatをどこかでclearさせないと、floatの親要素は高さを持ちません。
また、absoluteを効かせている要素を、float: rightを効かせている要素と同じ位置にさせるには、同じく右寄りにする必要があります。

また、今回のケースの場合、包括している.wrapをhoverターゲットにしないとうまく動かせないように思います。

下記でいかがでしょうか。

css

1.wrap { 2 position: relative; 3} 4.wrap::after { 5 clear: both; 6 content: ""; 7 display: block; 8 height: 0; 9} 10.mail { 11 /* a要素はinline要素なので、marginやpaddingを使用するなら 12 明示的にブロックにする必要がある */ 13 display: inline-block; 14 float: right; 15 margin-top: 29px; 16 /* ブラウザによって、floatと同じ方向のmarginは二倍になるバグがあるため、 17 paddingに変更 */ 18 padding-right: 47px; 19} 20.balloon { 21 position: absolute; 22 display: none; 23 /* floatさせている要素と同じ左右位置にさせる */ 24 right: 29px; 25 top: 16px; 26} 27.wrap:hover .balloon { 28 /* img要素は、デフォルトは、inline-blockのためこちらに変更 */ 29 display: inline-block; 30}

投稿2019/02/20 06:48

編集2019/02/20 09:25
miyabi_takatsuk

総合スコア9528

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

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

EXIT

2019/02/20 08:11 編集

詳しい説明と共にありがとうございます。大変為になります。 :hoverと.balloonの間に+がいるようです。 やってみた所、追記のgifのようにドゥルルルとちらついてしまい、ちゃんとmailの下にいきませんでした… mailと同じ段に横並びしていた要素も下に下がってしまい、うまくいきませんでしたTT
miyabi_takatsuk

2019/02/20 08:22

同じ団に横並びしていた要素は、質問に記載がなかったので、考慮しておりません。 そのようなものがあるのならば、 HTML、CSSの記載を揃えていただかないと、正しい回答は得られませんよ。 HTML、CSSは、その部分だけで完結するとは限りません。 一見関連していないような部分も、関連している可能性があります。 横並びさせている要素、その横並びを包括している要素、関連するCSSも含め、 質問のコードに含めてください。
miyabi_takatsuk

2019/02/20 08:24

また、私の回答をよくご覧になってください。 .mail:hover .balloon→.wrap:hover .balloonに変更しています。 こちらなら、+をつけなくても表示されます。
EXIT

2019/02/20 08:53

すいません。自分の打つのが遅くて入れ違いになってしまったようです。 この回答を見た上で、さらに追記やコードの追加をしました。よかったら見ていただけると嬉しいです。
EXIT

2019/02/21 10:38

ありがとうございます! 教えていただいたコードでやってみた所、mail付近の効果はちゃんとできました!????ただ隣の横並び要素は下がったままだったので、 header を inline-block で並べるのではなく flexbox に変更して、参考にしながら調整した所 解決できました! 丁寧な回答に大変感謝しています。
guest

0

.mail:hover + .balloon { //セレクタ間にプラスを追加 }

https://techacademy.jp/magazine/19418

投稿2019/02/20 06:41

yu-smc

総合スコア610

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

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

EXIT

2019/02/20 07:49

ありがとうございます。ホバーで表示されるようになりました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問