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

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

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

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

HTML5

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

Q&A

解決済

4回答

2140閲覧

画像にマウスが乗ったとき表示を変えたいです

ryuji000

総合スコア19

CSS3

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

HTML5

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

0グッド

1クリップ

投稿2017/08/12 23:31

編集2017/08/14 14:14

###前提・実現したいこと
現状はこのマウスが乗る前はこのようになり
イメージ説明
マウスが乗ると画像の様に背景が真っ白になってしまいます。
イメージ説明
マウスが乗ったときどのようにしたいかというとこの下の画像のようにしたいです。
イメージ説明

html

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 6 <link rel="apple-touch-icon" href="icon/logo.jpg"> 7 <link rel="stylesheet" href="css/style.css"> 8 <link rel="stylesheet" href="css/normalize.css"> 9 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 10 <script type="text/javascript" src="slick/slick.min.js"></script> 11 <title>lanugo</title> 12</head> 13<body> 14 <header> 15 <div class="header__wrap flex"> 16 <a href=""> 17 <div class="header__left"> 18 <div class="header__logo"> 19 <img src="img/logo.jpg"> 20 </div> 21 </div> 22 </a> 23 <nav class="nav"> 24 <ul class="nav__gNav flex"> 25 <li><a href="">menu</a></li> 26 <li><a href="">news</a></li> 27 <li><a href="">concept</a></li> 28 <li><a href="">access</a></li> 29 <li><a href="">contact</a></li> 30 </ul> 31 </nav> 32 </div> 33 </header> 34 <div class="mainVisual"> 35 <div class="concept"> 36 <img src="img/concept.png"> 37 </div> 38 </div> 39 <div class="main"> 40 <div> 41 <img src="img/main_content.png" class="main__img"> 42 <div class="main__item--1"> 43 <div class="main__item--text"> 44 心から「きれいに」「かわいく」したいと思っているため、すべての施術にはオススメのトリートメントと前処理と後処理を無料で含めさせて頂きます。 45 </div> 46 </div> 47 <div class="main__item--2"> 48 <div class="main__item--text"> 49 <p>お客さまと信頼しあえる関係性で一緒に都市を重ねていきたいという思いから、わかりやすい料金メニューにしています。施術に追加でオプションがつくことはありません。</p> 50 </div> 51 </div> 52 <div class="main__item--3"> 53 <div class="main__item--text"> 54 <p>丁寧な施術ができるように一対一で施術をおこなえるようにしております。丁寧な施術をおこないます。</p> 55 </div> 56 </div> 57 <div class="main__item--4"> 58 <div class="main__item--text"> 59 <p>LINE@を使ったスタイリングのアドバイスや髪のケアなど、お家に帰った後のご相談もきがるにできます。</p> 60 </div> 61 </div> 62 <div class="main__item--5"> 63 <div class="main__item--text"> 64 <p>アットホームな空間をご用意させてもらうことで、スタイルやケア、その他のこともお客さまから伝えやすくなる工夫をしています。</p> 65 </div> 66 </div> 67 <div class="main__item--6"> 68 <div class="main__item--text"> 69 <p>最新のトレンドのスタイルを取り入れながら、お客さまに似合う髪型を提案します。小顔矯正立体カットの資格を持ち、骨格や肩幅から似合せを提供します。</p> 70 </div> 71 </div> 72 </div> 73 </div> 74 <div class="information flex"> 75 <div class="information__left"> 76 <div class="information__text"> 77 <p>営業日 : 火曜日~日曜日(金曜日のみ20:00まで)</p> 78 <p>営業時間 : 11:00~19:00</p> 79 <p>住所 : 和歌山市12番町15島ビル 2F</p> 80 <p>TEL : 0734-88-2668</p> 81 <div class="facebook"> 82 <div id="pagePlugin"> 83 <div class="fb-page" data-href="https://www.facebook.com/Hairlifedesign-lanugo-1426322340740357/" data-tabs="timeline" data-width="500" data-height="500" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/Hairlifedesign-lanugo-1426322340740357/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/Hairlifedesign-lanugo-1426322340740357/">Hair&amp;lifedesign lanugo</a></blockquote> 84 </div> 85 </div> 86 </div> 87 </div> 88 </div> 89 <div class="information__right"> 90 <img src="img/information1.png"> 91 <img src="img/information2.png"> 92 </div> 93</div> 94<div class="instagram"> 95 <iframe src="https://snapwidget.com/embed/423101" class="snapwidget-widget" allowTransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:100%; height:200px"></iframe> 96</div> 97 98<div id="fb-root"></div> 99 100<script> 101 (function(d, s, id) { 102 var js, fjs = d.getElementsByTagName(s)[0]; 103 if (d.getElementById(id)) return; 104 js = d.createElement(s); js.id = id; 105 js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.10&appId=1881778235415743"; 106 fjs.parentNode.insertBefore(js, fjs); 107}(document, 'script', 'facebook-jssdk'));</script> 108</body>

css

1body { 2 letter-spacing: .1em; 3 line-height: 1.5em; 4 font-size: 62.5%; 5 font-weight: 200; 6 font-family: helvetica, arial, 'hiragino kaku gothic pro', meiryo, 'ms pgothic', sans-serif; 7} 8header { 9 width: 100%; 10 position: fixed; 11 z-index: 10000; 12 background-color: #fff; 13} 14.flex{ 15 display: flex; 16} 17.header__logo { 18 margin: 0 50px; 19} 20.header__wrap { 21 margin: 0 auto; 22 padding: 15px 0; 23 position: relative; 24 justify-content: space-between; 25 flex-wrap: wrap; 26 align-items: center; 27} 28.nav__gNav li { 29 margin: 0 10px; 30 padding: 1px 4px; 31 font-size: 2.5rem; 32 color: #4d4d4d; 33} 34.mainVisual { 35 background-image: url(../img/main.jpg); 36 width: 100%; 37 height: 650px; 38 position: relative; 39 background-position: center center; 40 background-repeat: no-repeat; 41 background-size: cover; 42} 43.concept { 44 width: 900px; 45 top: 490px; 46 bottom: 0; 47 left: 100px; 48 right: 0; 49 position: absolute; 50 margin: 0 auto; 51} 52.main { 53 height: 100vh; 54 width: 1200px; 55 margin: 410px auto 0; 56 position: relative; 57} 58.main__img { 59 position: absolute; 60 top: 170px; 61 left: 230px; 62 z-index: 100; 63} 64/*マウスが乗った*/ 65.main__item--1{ 66 background-image: url(../img/mainitem1.png); 67 width: 300px; 68 height: 295px; 69 position: absolute; 70 top: -79px; 71 left: 43px; 72 z-index: 1; 73} 74.main__item--1:hover { 75 background-image: url(../img/mainitemh1.png); 76 background-repeat: no-repeat; 77} 78.main__item--2{ 79 background-image: url(../img/mainitem2.png); 80 width: 220px; 81 height: 275px; 82 position: absolute; 83 top: 34px; 84 left: 731px; 85 z-index: 1; 86} 87.main__item--2:hover { 88 background-image: url(../img/mainitemh2.png); 89 background-repeat: no-repeat; 90} 91.main__item--3{ 92 background-image: url(../img/mainitem3.png); 93 width: 205px; 94 height: 200px; 95 position: absolute; 96 top: 247px; 97 left: 268px; 98 z-index: 1; 99} 100.main__item--3:hover { 101 background-image: url(../img/mainitemh3.png); 102 background-repeat: no-repeat; 103} 104.main__item--4{ 105 background-image: url(../img/mainitem4.png); 106 width: 215px; 107 height: 215px; 108 position: absolute; 109 top: 360px; 110 left: 523px; 111 z-index: 1; 112} 113.main__item--4:hover { 114 background-image: url(../img/mainitemh4.png); 115 background-repeat: no-repeat; 116} 117.main__item--5{ 118 background-image: url(../img/mainitem5.png); 119 width: 234px; 120 height: 234px; 121 position: absolute; 122 top: 581px; 123 left: 784px; 124 z-index: 1; 125} 126.main__item--5:hover { 127 background-image: url(../img/mainitemh5.png); 128 background-repeat: no-repeat; 129} 130.main__item--6{ 131 background-image: url(../img/mainitem6.png); 132 width: 330px; 133 height: 245px; 134 position: absolute; 135 top: 617px; 136 left: 191px; 137 z-index: 1; 138} 139.main__item--6:hover { 140 background-image: url(../img/mainitemh6.png); 141 background-repeat: no-repeat; 142} 143.information { 144 width: 1200px; 145 margin: 340px auto 0; 146 justify-content: space-around; 147 color: #666; 148} 149.information__text { 150 margin-left: 30px; 151} 152.information__text p { 153 margin-top: 7px; 154 font-size: 2rem; 155 letter-spacing: 5px; 156} 157.information__text p:nth-of-type(3) { 158 margin-top: 40px; 159} 160.information__right img:last-child { 161 margin-top: 30px; 162} 163.facebook { 164 margin-top: 30px; 165} 166.instagram { 167 margin-top: 50px; 168 width: 100%; 169 170} 171.main__item--text { 172 width: 100%; 173 height: 100%; 174 opacity: 0; /* マスクを表示しない */ 175 -webkit-transition: all 0.2s ease; 176 transition: all 0.2s ease; 177} 178.main__item--text:hover { 179 opacity: 1; /* マスクを表示する */ 180 padding-top: 110px; 181}

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

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

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

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

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

guest

回答4

0

ベストアンサー

現在はどのような症状なのでしょうか?ご提示のクラス名は間違いでは無いしょうか?(「main__item--1」「~--2」)不明なので、何とも言えませんが、マスクとして<div class="main__item--text">を設定する場合だと思いますが、マウスのON・OFFともopacity: 0;になっているので

CSS

1.main__item--text:hover { 2 opacity: 1; /* マスクを表示する */ 3} 4```ではどうでしょうか?

投稿2017/08/13 00:33

yoshinavi

総合スコア3521

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

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

ryuji000

2017/08/13 00:42

現状の症状を追加しました。
yoshinavi

2017/08/13 00:50

表示されている内容が提示頂いているのと違うので、クラス名がダブっていませんか?
ryuji000

2017/08/13 00:59

すみませんhtml修正しました
yoshinavi

2017/08/13 01:13

表示方法の前に、表示内容が提示コードと違ってますので、クラスのダブりが考えられます。コードをしっかり見直して見て下さい。
yoshinavi

2017/08/13 01:22

現在の表示で、テキスト部分「心から~」は提示コードにはありません。背景の画像も提示コードにはありません。 考えられるのは、違う部分を質問されているか、CSSコードに同名のクラスが存在し、後述されているとかんがえられますので、しっかり見直して見て下さい。
ryuji000

2017/08/13 05:55

すみませんもう一度修正しました
yoshinavi

2017/08/13 08:41

質問内容と提示されている箇所が違うようですね。まず、「.main__item--text:hover」の部分を一旦削除(コメントアウトでも良いです)し、「通常はこの画像で表示して」の画像が表示されていますか? 恐らく違う表示だと思います。マウスOFFの状態で正しく表示させてから、次の「マウスONで表示変化」に進むのが良いです。 もう一度言いますと、質問内容と提示されているHTML・CSSのコードの箇所が違っています。ご自分の質問の矛盾点に気付かなければ、誰も回答は出せませんよ。
yoshinavi

2017/08/13 09:02

質問でスミマセンが、 ①「信頼~」と「美しく~」の部分が同系統に見えたので、クラス名のダブりと思いましたが、そうでは無く、全くの別モノでしょうか? ②「美しくBeautiful and cute」の部分は「.main__item--1」の画像に含まれているのでしょうか?
ryuji000

2017/08/13 09:52

全く別物です 美しくBeautiful and cuteの部分だけ画像です。 説明が下手ですみません
yoshinavi

2017/08/13 10:24

こちらこそ早合点でスミマセン。であれば、「8-0_nyan5」さんのご提案で問題ないと思いますが、 ①「美しくBeautiful and cute」の部分が「mainitemh1.png」との解釈で良いですか? ②現状は「マウスON時に、グレーの部分が消えてしまっている」との解釈で良いのでしょうか? ③マウスOFF時にはグレー部分は表示されているのでしょうか? (コードを提示の部分と変えられてるみたいですが、現在のコードで提示して下さい。)
ryuji000

2017/08/13 14:20

とりあえずはグレーになっている背景を透明にして元の背景を写したいんですよね
ryuji000

2017/08/13 14:28

マウスOFF時は表示されません
yoshinavi

2017/08/13 23:08

①「.main__item--text p」のコードが提示してください。 ②「mainitemh1.png」にはテキスト部分の「美しくBeautiful and cute以外は無い」で良いでしょうか? ③参考とする背景「観葉植物」に該当するものはどれですか? 参考とするイメージと比べると提示コードでは基となる背景画がありません。グレー部分が基の背景画となる部分ですよね。 「美しく~」はマウスONのみの表示のはずですが、説明を聞くとどうも違います。もう一度、提示コードにコメントを付けて整理して (1)マウスOFFの状況 (2)マウスONの状況 を関連コードと合わせて提示してください。
ryuji000

2017/08/14 02:53

① pの部分はcssは何も指定はしていないです。 ② 「美しくBeautiful and cute以外は無い」以外はないです。 ③背景半透明のグレーにしたいです 質問整理してみたのでお手数ですがもう一度見ていただけると助かります。
yoshinavi

2017/08/14 04:03

①「美しく~」の部分は画像自体の背景が透過していますか? ②「心から~」の部分に背景色として白がどこかで設定されてないでしょうか? リセット部分で全体に「p」とかの背景色は無いでしょうか? body全体に赤色を設定して見てはどうですか?同じように該当部分が赤くなるでしょうか? ③「<p>」を外して見てはどうでしょうか?透過するのであれば、どこかで設定されています。④「.main__item--text」がどこかで使われてないですか? 現状や他の方の回答を見てもCSSの設定がダブっている様にしか見えません。
ryuji000

2017/08/14 04:19

① 画像自体の背景は透過しています。 ② 背景色は特に指定していないですね。 確認の為に指定するbodyにかける指定はcolor:red;であってますか? ③外しても背景は白いままでした。 ④違うところでは使われていませんでした。 hoverした時の指定をcssでbackground-imageで指定してるからでしょうか?
yoshinavi

2017/08/14 04:42

②でbodyに「color:red;」を指定して、マウスONでもテキスト周囲が白色のままなら、どこかで白が設定されています。テキスト周囲が赤色なら設定されていません。その場合は背景が下に潜っている可能性があります。 「.main__item--1」は「position: absolute;」「z-index: 1;」が設定されていますので、親となる部分との「z-index」の部分を調整して見てください。 質問者様を疑う訳では無いですが、見落としの可能性もあるため、出来れば、CSSの全体コードが見たいのが正直なところです。可能であれば他の方も見れるので、もっと早く解決策が見つかると思います。
yoshinavi

2017/08/14 04:52

回答者「8-0_nyan5」さんとのやり取りで、 >画像問題だったのですが一つだけにしたら次は背景の色が真っ白になってしまいました とありますが、これはどの部分をどのようにされたのでしょうか?
ryuji000

2017/08/14 14:13

何度もお手数をおかけしてすみませんコード全体を載せますね
yoshinavi

2017/08/14 23:39

コードの提示ありがとうございます。本来であれば「8-0_nyan5」さん「kei344」さんのご回答で問題ないと思いますが、見直しみて気になる点がありました。 「.main__item--1:hover」時の画像が「mainitemh1.png」とファイル名が違っています。 記入間違いであれば、その部分が白紙状態で表示されるので白く見える原因かと思います。ファイル名を直して試して下さい。
ryuji000

2017/08/15 00:22

書き直したらいけました。 丁寧な説明ありがとうございます。 長い時間付き合っていただきありがとうございます。 また何かありましたらぜひお願いします。
yoshinavi

2017/08/15 00:56

こちらこそ、途中早合点でスミマセン。「kei344」さんのご提案にあるように「.main__item--1:hover」部分は本来要りません。あっても正しく設定されていれば問題無いのですが、今回みたいにエラー原因の一つになる可能性があります。余分なコードを無くし軽量化を計るのも今後の課題にされると良いかもです。
ryuji000

2017/08/15 02:22

ほんとうに丁寧に教えていただきありがとうございます。
guest

0

動くサンプル:https://jsfiddle.net/9x8gkgw7/


回答時に書かれているコードで問題なく動くように見えます。他のスタイルがあたっているかや、画像自体が透過しているかどうかなど確認されてはいかがでしょうか。
また、CSSは部分ではなく全体を提示されたほうがよいとおもいます。

【開発者ツールを使おう! カスタマイズするphpファイルを探す-その1 | RYUS blog】
http://ryus.co.jp/blog/customize-php-search-1/

【Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 - Build Insider】
http://www.buildinsider.net/web/chromedevtools/01

【第1回 詳説:デベロッパーツールの使い方:Google Chrome版Firebug:デベロッパーツール取扱説明書|gihyo.jp … 技術評論社】
http://gihyo.jp/dev/feature/01/devtools/0001?page=2

投稿2017/08/14 03:08

kei344

総合スコア69364

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

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

ryuji000

2017/08/14 14:15

全体書き加えました。 説明が下手ですみません。
ryuji000

2017/08/14 22:18

自分の方では背景に白がかかってしまうのですが
guest

0

提示されているコードを生かすなら、以下でどうでしょう。

css

1.main__item--text:hover { 2 opacity: 1; /* マスクを表示する */ 3 padding-top: 110px; /* ホバーで下にずらす */ 4} 5

ホバーでずらす値は、適宜変更してください。

参考まで。

追記

html

1<div class="main__item--1"> 2<div class="xxx"><!--追記--> 3 <div class="main__item--text"> 4 <p>心から「きれいに」「かわいく」したいと思っているため、すべての施術にはオススメのトリートメントと前処理と後処理を無料で含めさせて頂きます。</p> 5 </div> 6</div><!--追記--> 7</div>

(以下のコードだと画像が透過されていないようなので)

css

1.main__item--1:hover { 2 background-image: url(../img/mainitemh1.png); 3}

このコードを以下に差し替えと追加

css

1.xxx { 2 height: 295px; /*表示させている画像の高さ*/ 3 opacity: 0; 4 background-image: url(../img/mainitemh1.png); /*重ねる画像のURL*/ 5} 6.xxx:hover { 7 opacity: 1; 8} 9

投稿2017/08/13 01:06

編集2017/08/14 00:02
8-0_nyan5

総合スコア2352

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

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

ryuji000

2017/08/13 05:59

この場合背景の色がすべてグレーになってしまい真ん中の画像のように表示されないのですがどうすればいいでしょう?
8-0_nyan5

2017/08/13 06:12 編集

.main__item--1:hover { background-image: url(../img/mainitemh1.png); } ここがもと画像と一緒だからではないですか? すいません。画像一緒でも表示できますね。わたしの環境ではどちらでも大丈夫です。 うーん、なぜでしょう。 なにか、他にコードがありませんか?
ryuji000

2017/08/13 06:09

画像問題だったのですが一つだけにしたら次は背景の色が真っ白になってしまいました
ryuji000

2017/08/13 09:49

とくには見つからなかったですね
guest

0

画像にマウスが乗ったとき表示を変えたい

⇒パッと思いついた内容です。

案1)画像を2つ用意して、CSSのマウスオーバーで画像を切り替える。

案2)<p>タグにクラス追加し、javascriptのマウスオーバーでテキストの表示・非表示を切り替える。

案3)CSSのマウスオーバーで画像のz-indexを変更して、(画像の位置を手前と奥にして、)文字を表示・非表示にする。

投稿2017/08/13 01:04

tomari_perform

総合スコア760

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

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

ryuji000

2017/08/13 01:10

回答ありがとうございます 試してみます
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問