前提・実現したいこと
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/ツールのバージョンなど)
提示コードで出来てますが、何が問題なのでしょう?
コードはマークダウンのcode機能を利用してご提示ください。php、JavaScriptは本件とどのような関係があるのでしょうか?関係ないのであればタグの精査をお願いします
画像ならこれでできますが、文字の場合だとうまくいきませんでした。
javascriptを使ってオーバーレイを作成する方法も検索で出てきたのでjavascriptをつけました。邪魔だったようなので消しました。
マークダウンの件、難しければコード部分のみを選択状態で<code>ボタンを押してください。
うまくいかなかったときのコードも提示してください。
状況が再現できません。
編集を行いました
「うまくできない」とは「何をしたときに」「どうなると思って」「どうなったのか」を、スクリーンショットなどと併せて、具体的に記述されたほうが回答を得られやすいと思います。
コードを追加しました。
スクショに関しては仕事で使っているもののため機密が含まれており掲載できません。
追記されたHTMLが文法的におかしい上にCSSのセレクタも違います。当然動きません。
ガチ初心者のため、正直どこがおかしいと言われてもわかりません。
もう一度編集しなおしてください。
class="it_id" とはなんですか?
<a>タグいれてますがこれを具体的にどうしたいのですか?
こちらになにがしたいか伝わってきません。
ペイントツールなど使って図解してもいいと思います。
文法もぐちゃぐちゃなようなので試しコードに関しては消去いたしました。文章で説明を追記しています。
どこがおかしいかというと、質問の仕方がおかしいです。
つまり、先のコメントでもありますが「うまくできない」とは「何をしたときに」「どうなると思って」「どうなったのか」がこちらに伝わってきてません。
今コメントしている方たちと、コメントしてないけど見てる方たちがいると思いが、
「質問者さんが困ってるから投稿している」事を理解したうえで助けてあげたいと思っているはずです。
伝えるのって難しいと思いますが伝わるように質問文編集なり、画像を貼るなりして頑張ってください。
内容を追加しました
参考にされてるコードだけではなく、質問者さんのコードを見せてください。
文法ミスとか、何かの間違いとかで想定外の事が起きている可能性もありますが、
現状では気付いてあげられません。
>追記されたHTMLが文法的におかしい上にCSSのセレクタも違います。当然動きません。
>もう一度編集しなおしてください。
class="it_id" とはなんですか?
<a>タグいれてますがこれを具体的にどうしたいのですか?
等のコメント頂いたため、余計意味不明になると考え削除いたしました。
ツールチップのようなことをやりたいのでしょうか。
https://materializecss.com/tooltips.html
そうですね、そのような感じのものをやりたいです。
>スクショに関しては仕事で使っているもののため機密が含まれており掲載できません。
画像やテキストをサンプルに差し替えて掲載もできませんか?
コードに関しても同じように差し替えてできませんか?
うっかり差し替え忘れ箇所があって、質問者さんの立場を悪くする可能性もあるかもなので無理にはいいませんが、現状では少なくとも私には問題の解決のお手伝いは難しいです。
回答に関係ない事なので無視してくれても構いませんが。。。
クライアントがいるという事ですか?
出来ない事は「出来ない」と正直に伝えた方が大事な場合もありますよ?