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

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

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

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

CSS

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

Q&A

2回答

337閲覧

文字の上にマウスオーバーでオーバーレイ

humiduki

総合スコア10

HTML

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

CSS

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

0グッド

1クリップ

投稿2019/01/22 02:05

編集2022/01/12 10:55

前提・実現したいこと

IDの上にマウスオーバーすることでオーバーレイでIDに紐付いた情報が表示されるというシステムがつくりたいのですが、下記コードを参考にし、画像ではなく特定のIDに置き換え、その上にカーソルを置くことで、オーバーレイ画面が出てくるようにしたかったのですが、オーバーレイ画面は出てきませんでした。「idが記載されている場合、idにマウスを持っていくとオーバーレイで説明が表示されて欲しい。」との説明しか受けておらず、正直初心者のため方針すらどのようなものなのかあやふやな状態です。

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

該当のソースコード

参考にしたソースコード html <div class="sample1"> <img src="./fruit.jpg" alt="フルーツ寄せ集め" /> <div class="mask"> <div class="caption">It's fresh !</div> </div> </div> css .sample1 { width: 280px; height: 188px; overflow: hidden; margin: 10px 8px 10px 16px; position: relative; /* 相対位置指定 */ } .sample1 .caption { font-size: 130%; text-align: center; padding-top: 80px; color: #fff; } .sample1 .mask { width: 100%; height: 100%; position: absolute; /* 絶対位置指定 */ top: 0; left: 0; opacity: 0; /* マスクを表示しない */ background-color: rgba(0,0,0,0.4); /* マスクは半透明 */ -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } .sample1:hover .mask { opacity: 1; /* マスクを表示する */ }

補足情報(FW/ツールのバージョンなど)

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

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

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

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

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

akihiro3

2019/01/22 02:13

提示コードで出来てますが、何が問題なのでしょう?
m.ts10806

2019/01/22 02:17

コードはマークダウンのcode機能を利用してご提示ください。php、JavaScriptは本件とどのような関係があるのでしょうか?関係ないのであればタグの精査をお願いします
humiduki

2019/01/22 02:34

画像ならこれでできますが、文字の場合だとうまくいきませんでした。 javascriptを使ってオーバーレイを作成する方法も検索で出てきたのでjavascriptをつけました。邪魔だったようなので消しました。
m.ts10806

2019/01/22 02:35

マークダウンの件、難しければコード部分のみを選択状態で<code>ボタンを押してください。
azuapricot

2019/01/22 02:37

うまくいかなかったときのコードも提示してください。 状況が再現できません。
humiduki

2019/01/22 02:37

編集を行いました
kei344

2019/01/22 02:43

「うまくできない」とは「何をしたときに」「どうなると思って」「どうなったのか」を、スクリーンショットなどと併せて、具体的に記述されたほうが回答を得られやすいと思います。
humiduki

2019/01/22 02:46

コードを追加しました。 スクショに関しては仕事で使っているもののため機密が含まれており掲載できません。
kei344

2019/01/22 02:52

追記されたHTMLが文法的におかしい上にCSSのセレクタも違います。当然動きません。
humiduki

2019/01/22 03:00

ガチ初心者のため、正直どこがおかしいと言われてもわかりません。
azuapricot

2019/01/22 03:00

もう一度編集しなおしてください。 class="it_id" とはなんですか? <a>タグいれてますがこれを具体的にどうしたいのですか? こちらになにがしたいか伝わってきません。 ペイントツールなど使って図解してもいいと思います。
humiduki

2019/01/22 03:04

文法もぐちゃぐちゃなようなので試しコードに関しては消去いたしました。文章で説明を追記しています。
akihiro3

2019/01/22 03:15

どこがおかしいかというと、質問の仕方がおかしいです。 つまり、先のコメントでもありますが「うまくできない」とは「何をしたときに」「どうなると思って」「どうなったのか」がこちらに伝わってきてません。 今コメントしている方たちと、コメントしてないけど見てる方たちがいると思いが、 「質問者さんが困ってるから投稿している」事を理解したうえで助けてあげたいと思っているはずです。 伝えるのって難しいと思いますが伝わるように質問文編集なり、画像を貼るなりして頑張ってください。
humiduki

2019/01/22 03:38

内容を追加しました
akihiro3

2019/01/22 03:38

参考にされてるコードだけではなく、質問者さんのコードを見せてください。 文法ミスとか、何かの間違いとかで想定外の事が起きている可能性もありますが、 現状では気付いてあげられません。
humiduki

2019/01/22 03:57

>追記されたHTMLが文法的におかしい上にCSSのセレクタも違います。当然動きません。 >もう一度編集しなおしてください。 class="it_id" とはなんですか? <a>タグいれてますがこれを具体的にどうしたいのですか? 等のコメント頂いたため、余計意味不明になると考え削除いたしました。
humiduki

2019/01/22 04:07

そうですね、そのような感じのものをやりたいです。
akihiro3

2019/01/22 04:34

>スクショに関しては仕事で使っているもののため機密が含まれており掲載できません。 画像やテキストをサンプルに差し替えて掲載もできませんか? コードに関しても同じように差し替えてできませんか? うっかり差し替え忘れ箇所があって、質問者さんの立場を悪くする可能性もあるかもなので無理にはいいませんが、現状では少なくとも私には問題の解決のお手伝いは難しいです。
akihiro3

2019/01/22 04:42

回答に関係ない事なので無視してくれても構いませんが。。。 クライアントがいるという事ですか? 出来ない事は「出来ない」と正直に伝えた方が大事な場合もありますよ?
guest

回答2

0

少し違うかもですが、簡易的なものならHTMLだけで「title="***"」で可能です。

以下は例ですが、上下に並んだBOXの下側にマウスをあてると「box2」と出ます。

HTML

1<div class="box1">box1</div> 2<div class="box2" title="box2">box2</div>

CSS

1.box1 { 2 margin: 10px auto; 3 width: 50%; 4 height:5vw; 5 background-color: lightblue; 6} 7 8.box2 { 9 margin: 10px auto; 10 width: 50%; 11 height:5vw; 12 background-color: lightgreen; 13}

文字の場合ならこんな感じで。
※「う」にtitle設定しています。

HTML

1あい<span title="「う」にtitle設定しています。">う</span>えお

投稿2019/01/22 10:13

編集2019/01/22 10:26
yoshinavi

総合スコア3521

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

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

0

これをどうしたいのでしょうか?

heml

1<!DOCTYPE html> 2<html lang="ja" dir="ltr"> 3<head> 4 <meta charset="utf-8"> 5 <title>sample</title> 6 <style media="screen"> 7 .sample1 { 8 width: 280px; 9 height: 188px; 10 overflow: hidden; 11 margin: 10px 8px 10px 16px; 12 position: relative; /* 相対位置指定 */ 13 } 14 .sample1 .caption { 15 font-size: 130%; 16 text-align: center; 17 padding-top: 80px; 18 color: #fff; 19 } 20 .sample1 .mask { 21 width: 100%; 22 height: 100%; 23 position: absolute; /* 絶対位置指定 */ 24 top: 0; 25 left: 0; 26 opacity: 0; /* マスクを表示しない */ 27 background-color: rgba(0,0,0,0.4); /* マスクは半透明 */ 28 -webkit-transition: all 0.2s ease; 29 transition: all 0.2s ease; 30 } 31 .sample1:hover .mask { 32 opacity: 1; /* マスクを表示する */ 33 } 34 </style> 35</head> 36<body> 37 <div class="sample1"> 38 <img src="htts.com/uploads/avatars/u10/109538/Os5LmHi4_thumbnail.jpg" alt="フルーツ寄せ集め" /> 39 <div class="mask"> 40 <div class="caption">It's fresh !</div> 41 </div> 42 </div> 43</body> 44</html> 45

追記

コメントより
画像をテキストにとは、こういう事ですか?

html

1<!DOCTYPE html> 2<html lang="ja" dir="ltr"> 3<head> 4 <meta charset="utf-8"> 5 <title>sample</title> 6 <style media="screen"> 7 .sample1 { 8 width: 280px; 9 height: 188px; 10 overflow: hidden; 11 margin: 10px 8px 10px 16px; 12 position: relative; /* 相対位置指定 */ 13 } 14 .sample1 .caption { 15 font-size: 130%; 16 text-align: center; 17 padding-top: 80px; 18 color: #fff; 19 } 20 .sample1 .mask { 21 width: 100%; 22 height: 100%; 23 position: absolute; /* 絶対位置指定 */ 24 top: 0; 25 left: 0; 26 opacity: 0; /* マスクを表示しない */ 27 background-color: rgba(0,0,0,0.4); /* マスクは半透明 */ 28 -webkit-transition: all 0.2s ease; 29 transition: all 0.2s ease; 30 } 31 .sample1:hover .mask { 32 opacity: 1; /* マスクを表示する */ 33 } 34 </style> 35</head> 36<body> 37 <div class="sample1"> 38 <p>text text text text text text text text text text text text text text </p> 39 <div class="mask"> 40 <div class="caption">It's fresh !</div> 41 </div> 42 </div> 43</body> 44</html>

投稿2019/01/22 02:53

編集2019/01/22 02:58
akihiro3

総合スコア955

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

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

humiduki

2019/01/22 02:56

画像ではなく文字(ID)の上にマウスオーバーすることでオーバーレイが表示れれるようにしたいです。
azuapricot

2019/01/22 03:02

その文字(ID)とはどういうことなのかを伝えないと回答者も困ってしまいますよ。
humiduki

2019/01/22 03:06

画像ではなく文字にマウスオーバーすることでオーバーレイ画面を表示させたいという意味です
akihiro3

2019/01/22 03:09

その文字とはどれの事ですか?
humiduki

2019/01/22 03:29

サイト中の特定の単語のことです。
akihiro3

2019/01/22 03:34

「It's fresh !」の事ですか?
humiduki

2019/01/22 03:37

「It's fresh !」ではなく、その「It's fresh !」という説明文を表示させるためにクリックする文字(参考コードだと画像)の部分です。
akihiro3

2019/01/22 03:41

追記のコードは違いますか? あと、マウスオーバーではなく、クリックですか?
humiduki

2019/01/22 03:56

追記のコードを試してみましたが、オーバーレイ画面は出ませんでした。 マウスオーバーです。失礼いたしました。
akihiro3

2019/01/22 04:09

追記前のコードの状態は理想の状態ですか? こちらでは、追記後のコードも同じ処理が起きてますが。。。
humiduki

2019/01/22 04:13

自分で1から作ったものではなくもともとあるコードに追記している状態なので、どこかで干渉している可能性はあります。コードの流れとしてはif文でIDが取得できたらID表示+画面表示のようにしているつもりです。
akihiro3

2019/01/22 04:45

if文があるとか初めて知ったのですが。。。 申し訳ございませんが、私にはお力になれそうにありません。 頑張ってください。
azuapricot

2019/01/22 05:12

どこかで干渉している可能性があるのなら、コードの全体を貼りつけていただかないと調査はできません。 この回答者さんが載せているコードで、文字をマウスオーバーすれば画像のときのようなオーバーレイ画面は出ます。 もし出ないのだとしたら、完全にここ以外の箇所が原因です。 それを知りたいのだとしたならば、どうにか頑張って差し替えをして提示してもらうしかないです。 提示方法もわからないというのであれば、お客様がいるとのことなので正直に私には無理ですと言いましょう。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問