サーチして沢山のサイトを見たのですが、どーーーーーーーしてもわからないので質問させてください。
サイトにある画像Aにマウスオーバーすると画像Bというのがポップアップで表示されるようにしたいのです。
どうやらjavascriptの方法とCSSの方法があるような感じなのですが、どーーーーーーーしてもわからないのです。。。
具体的にJavascriptでこう書いて入れてhtmlでこう書くんだよ、
とか
CSSにこれを追加してhtmlにはこう書くんだよ
とわかりやすく教えていただけると助かります。
どうぞよろしくお願いいたします。
A 回答 (1件)
- 最新から表示
- 回答順に表示
No.1
- 回答日時:
現在javascriptよりはCSSのほうが主流でしょうから・・
スタイルシートの、擬似要素:afterか:beforeに対して、contentプロパティで内容の追加をします。
ただし、画像のような「内容のない要素」空要素には追加ができません。簡単に説明できる内容ではないので仕様書を上げておきます。
12. 生成内容、自動番号振り、リスト ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
5.12.3 :before及び:after 疑似要素(The :before and :after pseudo-elements) ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
なお、こ仕様書はCSS2ですが、現在ウェブ標準のCSS2.1の良い邦訳を知りません。この部分は、すこし変更があってややこしいですが
※空要素には内容を追加できません(CSS2では説明されていなかった)
※改行させるにはwhite-spaceの設定が必要
いくつかの値がなくなりました。
img:hover:after{}ではダメです。
<p class="figure"><img???
p.figure:hover:after{}でなければなりません。
早速のご回答ありがとうございます。
私の力不足でせっかくのご説明が全て理解することが出来ず、申し訳なく思っております。
もうちょっと勉強してから再度トライしたいと思います。
本当にありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript HTML&CSS Javascriptによる動的テーブル 1 2023/03/27 19:51
- HTML・CSS CSSでサイトの背景に画像を組み込みたいのですが反映されません 2 2022/11/22 16:21
- その他(プログラミング・Web制作) 次に、楽天のアジャイル就活に参加して、1日で内定を獲得できる。私は大企業に就職できる? 2 2022/04/17 13:38
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- HTML・CSS リンクバナーのHTMLタグ。画像を変えたり、設置位置を変えるとバナー貼付け側はどう見える? 2 2023/02/01 12:01
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- HTML・CSS サルワカさんの吹き出しのスタイルシートについて。 https://saruwakakun.com/h 2 2022/10/28 22:55
- JavaScript ローディングアニメーションのロゴがページを読み込んだ後でも消えません 1 2022/09/20 21:50
- その他(プログラミング・Web制作) ホームページビルダー16で画像を保存したら画像がトップページ上に沢山出てきてしまいます 1 2022/12/06 14:50
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
含む含まないという概念自体の...
-
【ヒトの神秘】美男美女から何...
-
質問1.
-
smallにtext-allignが効かない
-
2個のFormを横並びにしたい
-
「諸要素」とはどういう意味で...
-
下線と文字の間を調整するには...
-
指定位置に来たら要素をボーダ...
-
textareaの幅を画面と合わせたい
-
VBA でIE 操作 ボタンをクリッ...
-
角丸画像の背景色を透明にした...
-
emとstrongの反対
-
CSSのa:hoverが急に一部だけ効...
-
初歩的な質問です。<div>のwidt...
-
タグは大文字と小文字どちらが...
-
改行ほどは行かないけど、若干...
-
外部CSSだけの記述でもSEOに有...
-
input type="hidden"で取得した...
-
html タグの閉じスラッシュ前の...
-
HTMLの〈li〉について教えてく...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
【ヒトの神秘】美男美女から何...
-
smallにtext-allignが効かない
-
含む含まないという概念自体の...
-
質問1.
-
2個のFormを横並びにしたい
-
「諸要素」とはどういう意味で...
-
input type="hidden"で取得した...
-
NからZへの全単射を具体的に構...
-
角丸画像の背景色を透明にした...
-
改行ほどは行かないけど、若干...
-
マージソートの計算量について-...
-
親要素・子要素
-
border: noneでボタンの境界線...
-
C言語 並び替え(配列)について
-
tdに対してmin-heightの定義、...
-
HTMLでTextareaを横に2つ並べ...
-
テキストボックスの中にリンク...
-
CSSで改行後の行間調整
-
H1タグを画像にしたい
-
ある要素の中身を全部グレーア...
おすすめ情報